Tailwind CSSでのテキスト省略: 三点リーダー（…）のスタイリング方法
レイアウトに収まりきれない文字数があった場合に、そのまま表示させるとレイアウトが崩れてしまうことがあります。
その対処法として三点リーダー（…）で文字を制限し省略することがありますが, Tailwind CSS ではどのように指定するのか調べてみました。
1行目で省略する場合
truncate というクラス名をしてするだけで三点リーダー（…）での省略させることができます。
<p class="text-sm truncate">
truncate というクラス名をしてするだけで三点リーダー（…）での省略させることができます。
</p>truncateの実際のスタイルはこのようになっています。
.truncat {
eoverflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}三点リーダー（…）を使用せずに、省略する場合はこのように指定します。
<p class="text-sm text-clip overflow-hidden">
三点リーダー（…）を使用せずに、省略する場合はこのように指定します。
</p>参考資料
https://tailwindcss.com/docs/text-overflow#truncate
複数行目で省略する場合
2行で省略する場合は、line-clamp-2を指定し高さを調整します。2の箇所を1 ~ 6まで好きな行数で指定できます。
3行目:line-clamp-3, 4行目:line-clamp-4
<p class="text-sm h-10 line-clamp-2">
2行で省略する場合は、`line-clamp-2`を指定し高さを調整します。`2`の箇所を1 ~ 6まで好きな行数で指定できます。3行目:`line-clamp-3`, 4行目:`line-clamp-4`と指定できます。
</p>line-heghtを指定している場合、テキストが見切れてしまう可能性があるので、height を調整する必要があります。
7行目以上を省略する場合
テーマに含める意味がない1 回限りのline-clamp値を使用する必要がある場合は、角かっこを使用して、任意の値を使用してその場でプロパティを生成します。
<p class="line-clamp-[7]">
<!-- ... -->
</p>tailwind.config.js ファイルでカスタマイズすることができます。
module.exports = {
theme: {
extend: {
lineClamp: {
7: '7',
},
}
}
}
