メインコンテンツへスキップ

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

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

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

見本

●ブロックレベル

これはダミーです。これはダミーです。

●インラインレベル

これはダミーです。これはダミーです。
設定例
ブロックレベル<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();
}