【Bootstrap】長文を「...」を使って省略する方法

はじめに

今回は、テキストを全て表示せずに省略したいなってときに使える方法についてまとめます。
といっても、Bootstrapを使ったら一瞬なのですが、、、

text-truncate

index.blade.php

<div class="row">
   <div class="col-6">
       ---省略---
   </div
   <div class="col-6">
       <h3>{{ $menu_name }}</h3>
       <p class="text-truncate" style="max-width:200px;">{{ $ing }}</p>
   </div>
</div>

このように、text-truncateを使うと、指定した幅で文章が切られ、その代わりに...が表示されることになります。
max-widthを指定しなくても、要素の幅で切られるので問題なく動作します。

インラインレベルでの動作は未確認ですが、d-inline-blockクラスを追加したり、max-widthを指定したりする必要があるようです。

引用