🍳

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

1 min read

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があるからマジややこしい。詳しくは以下が分かりやすい。

https://www.wakuwakubank.com/posts/285-html-css-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ライブラリを使えばできる。

https://zenn.dev/ilove/articles/8a93705d396e05

Discussion

ログインするとコメントできます