Tailwind CSS で簡単にテキストを省略する方法

3 点リーダー（親に横幅指定）

truncate クラスを使って、親要素に横幅を指定した上で 3 点リーダー（省略）を表示するには、以下のようなコードになります。親要素の w- クラスで横幅を設定し、子要素のテキストに truncate を指定することで、指定した横幅を超える部分を 3 点リーダーで省略できます。

これは、非常に長いテキストで... のような見え方になります。

３点リーダー（行指定可能）

最新バージョンの Tailwind では、line-clamp-2 が使えます。ラインクランプとは、テキストを特定の行数に制限するためのユーティリティです。

テキストの端をカットして表示

text-clip は Tailwind CSS の text-overflow プロパティに対応するユーティリティクラスで、テキストが要素の幅を超える場合に テキストの端をカットして表示 するために使用します。通常、truncate や line-clamp のような 3 点リーダーは表示されず、テキストがそのままカットされるため、明示的に省略を示す必要がない場合に使用されます。

3 点リーダー（手動で設定）

text-ellipsis は Tailwind CSS の text-overflow: ellipsis; に対応するクラスで、要素の幅を超えるテキストを 3 点リーダー（...）で省略表示 するために使用します。truncate と同様の効果ですが、手動で設定したい場合に便利です。

まとめ

Tailwind CSS では、truncate、line-clamp、text-clip、および text-ellipsis などのクラスを使用して、簡単にテキストを省略することができます。それぞれのクラスは、特定の状況で適したテキストの省略スタイルを提供します。特に、複数行の省略には line-clamp を使うと効果的です。

参考