メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

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

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

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.0.0テキストユーティリティより分離

より長いコンテンツの場合は、.text-truncate クラスを追加してテキストを省略記号で切り捨てられる。display: inline-blockdisplay: 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>
【設定】

CSS v5.1.0追加、v5.2.0Sassから名称変更

Sassミックスイン(Sass mixins)

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