テキストの省略(Text truncation) v5.0.0-alpha1テキストユーティリティより分離
省略記号を使用して長いテキスト文字列を切り捨てる。
※v5.2.0-beta1はプレリリースのため、"v5.2.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>
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();
}