テキストの省略（Text truncation） v5.0.0テキストユーティリティより分離

省略記号を使用して長いテキスト文字列を切り捨てる。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.0.0テキストユーティリティより分離

より長いコンテンツの場合は、.text-truncate クラスを追加してテキストを省略記号で切り捨てられる。display: inline-block か display: block が必要。

実例（Examples）

ブロックレベル

このテキストは非常に長く、表示されると切り捨てられる。

インラインレベル

このテキストは非常に長く、表示されると切り捨てられる。

ブロックレベル<div class="row">
  <div class="col-2 text-truncate">
    このテキストは非常に長く、表示されると切り捨てられる。
  </div>
</div>

インラインレベル<span class="d-inline-block text-truncate" style="max-width: 150px;">
  このテキストは非常に長く、表示されると切り捨てられる。
</span>

scss/mixins/_text-truncate.scss 内の設定@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}