Tailwind CSSのtruncateとline-clampの違い

truncate

truncateは1行のテキストがコンテナの幅を超える場合に、テキストを省略して...を表示します。

<div class="w-[100px] truncate">
  文字の長さがwidthを超えると省略されます文字の長さがwidthを超えると省略されます
</div>

実際の表示

文字の長さがwidthを超えると省略されます文字の...

line-clamp-1

line-clamp-1は1行のテキストがコンテナの幅を超える場合に、テキストを省略して...を表示します。

<div class="w-[100px] line-clamp-1">
  文字の長さがwidthを超えると省略されます文字の長さがwidthを超えると省略されます
</div>

実際の表示

文字の長さがwidthを超えると省略されます文字の...

注意点

似たようなスタイルの設定ですが、注意点があります。
truncateは英単語や数字の羅列の場合も幅を超える場合省略されますが、
line-clamp-1は英単語や数字の羅列の場合省略されません。

<p>truncate</p>
<div class="w-[100px] truncate">
  asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
<p>line-clamp-1</p>
<div class="w-[100px] line-clamp-1">
  asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>

実際の表示

truncate
asdfasdfasdfasdfasdfasdfasdf...
line-clamp-1
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf