- 単純なテキストの省略表示:
Tailwind CSSでは、
truncateクラスを使用して、テキストの省略表示を簡単に実現できます。以下の例では、truncateクラスをテキスト要素に追加することで、テキストが親要素の領域からはみ出した場合に省略記号(...)が表示されます。
<div class="truncate">
長いテキストがここに入ります...
</div>
- 行数制限付きの省略表示:
テキストの行数を制限して、省略表示を行いたい場合は、
line-clampクラスを使用します。以下の例では、line-clamp-3クラスをテキスト要素に追加して、テキストを3行に制限し、省略表示を行っています。
<div class="line-clamp-3">
長いテキストがここに入ります...
</div>
- ホバー時の完全表示:
テキストが省略されているが、ユーザーがホバーした際に完全なテキストを表示したい場合は、
hover:truncateクラスを使用します。以下の例では、ホバー時にテキストが省略されず、完全に表示されるようになります。
<div class="truncate hover:truncate-none">
長いテキストがここに入ります...
</div>