tailwindcssのbreak-wordsで改行しなくてハマった話
8250 ワード
break-wordsを指定しても開業されず、whitespace-pre-wrapを指定しないと改行してくれない。whitespaceは文中の空白・タブ・改行(\n)をどう扱うかを定義するCSSで、改行自体はbreak-wordsだけでされるはずなのに。
結論、外側で囲ってたdivにwhitespace-preが付いてたのが原因だった。だから改行せず、かと言ってはみ出さずぶつぎりになっていた。
改行に影響する3つのCSSプロパティ
- white-space (tailwindcssだとwhitespace-hoge)
- overflow-wrap（tailwindcssだとbreak-hoge)
- word-break （tailwindcssだとbreak-hoge)
overflow-wrapが取れる値にbreak-wordがあるからマジややこしい。詳しくは以下が分かりやすい。
原因のコード
<div className='col-span-7'>
<div className='text-sm font-medium whitespace-pre'>
<div className='w-full font-normal'>
<p className='inline text-xs font-medium text-gray-800'>{post.query}</p>
</div>
<p className='mb-1 pl-4 text-xs leading-5 break-words whitespace-pre-wrap line-clamp-3'>
{post.body}
</p>
</div>
</div>
おわかりいただけただろうか？気づかないよねこんなの。
関係ないクラスを除いたコード
<div className=''>
<div className='whitespace-pre'>
<div className='l'>
<p className=''>{post.query}</p>
</div>
<p className='break-words whitespace-pre-wrap'>
{post.body}
</p>
</div>
</div>
whitespace-preがあるからbreak-wrodsだけでは改行が起こらず、whitespace-pre-wrapを当てるとそちらが優先されて改行が起こるという現象だった。
ちなみに
「3行目ではみ出た分を...にしたい」というときはtailwindcss-line-clampライブラリを使えばできる。
Author And Source
この問題について(tailwindcssのbreak-wordsで改行しなくてハマった話), 我々は、より多くの情報をここで見つけました https://zenn.dev/maztak/articles/7ec72edecfacd3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol