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

より長いコンテンツの場合は、.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>

Sass v5.1.0追加

デフォルトの設定

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

scss/helpers/_text-truncation.scss の設定.text-truncate {
  @include text-truncate();
}