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

テキストの省略(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>
【設定】