より長いコンテンツの場合は、.text-truncate
クラスを追加してテキストを省略記号で切り捨てることが可能。display: inline-block
か display: block
が必要。
見本
●ブロックレベル
これはダミーです。これはダミーです。
●インラインレベル
これはダミーです。これはダミーです。設定例
ブロックレベル<div class="row">
<div class="col-2 text-truncate">
これはダミーです。これはダミーです。
</div>
</div>
インラインレベル<span class="d-inline-block text-truncate" style="max-width: 150px;">
これはダミーです。これはダミーです。
</span>