🍳

tailwindcss の break-words で改行しなくてハマった話

2021/09/11に公開

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'> // ここに 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'> // ここは本来 break-words だけでいいはず
            {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ライブラリを使えばできる。

結論

改行に影響する3つのCSSプロパティ

原因のコード

関係ないクラスを除いたコード

ちなみに

Discussion