Tailwind CSS 練習問題 46：テキストの折り返し
Tailwind CSSにおいて、長い英単語やURLが親要素の幅を超えてはみ出さないように、単語の途中の任意の位置で強制的に改行させたい場合、正しいクラスの説明はどれか。
- `break-normal`クラスを使用して、自然な改行位置でのみ改行を許可するように設定する。
- `break-words`クラスを使用して、単語の区切りで改行しつつ長い単語は途中で折る。
- `break-all`クラスを使用して、文字の任意の位置で強制的に改行させてはみ出しを防ぐ。
- `break-keep`クラスを使用して、単語の途中での改行を禁止し、文節単位でのみ改行する。
- `truncate`クラスを使用して、改行を禁止したうえで、はみ出した末尾を省略記号で表示する。
正解と解説を見る
正解：`break-all`クラスを使用して、文字の任意の位置で強制的に改行させてはみ出しを防ぐ。
長い英単語やURLが親要素の幅を超えてはみ出さないよう、強制的に改行させるには`break-all`クラスを使用するのが正解です。
【正解の理由】
`break-all`（CSSの`word-break: break-all;`に相当）は、単語の途中であっても親要素の端で強制的に改行させるため、長いURLなどによるレイアウト崩れを防ぐことができます。
【不正解の理由】
• 「`break-normal`クラスを使用して、自然な改行位置でのみ改行を許可するように設定する。」は誤り。これでは長い単語がそのままはみ出してしまいます。
• 「`break-words`クラスを使用して、単語の区切りで改行しつつ長い単語は途中で折る。」は誤り。これも折り返しに有効ですが、今回の「任意の位置で強制的に改行させる」説明とは異なります。
• 「`break-keep`クラスを使用して、単語の途中での改行を禁止し、文節単位でのみ改行する。」は誤り。これは日本語などで単語の途中で改行させないための設定です。
• 「`truncate`クラスを使用して、改行を禁止したうえで、はみ出した末尾を省略記号で表示する。」は誤り。これは1行に制限して「...」を表示するもので、改行はされません。