CSS基礎 練習問題 49：プロパティ：テキストの強制改行
とても長いURLや英単語が親要素の幅を超えてはみ出すのを防ぐため、単語の途中であっても強制的に改行させたい場合、正しいCSSの書き方はどれか。
- text-wrap: none; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
- word-wrap: normal; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
- line-break: strict; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
- word-break: break-all; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
- text-break: force; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
正解と解説を見る
正解：word-break: break-all; というプロパティを指定することで、単語の途中での改行を強制的に許可する。
長い英単語やURLが親要素の右端を突き抜けてしまうのを防ぐには、`word-break: break-all;`というプロパティを使用するのが正解です。
【正解の理由】
ブラウザは通常、英単語の途中で改行を行いません。しかし`word-break: break-all;`を指定すると、単語の途中であっても親要素の幅に合わせて強制的に改行されるようになり、レイアウトの崩れを防ぐことができます。
【不正解の理由】
• 「`text-wrap: none;`というプロパティを指定することで」という説明は、改行を禁止するような意味合いになり目的と逆であり、構文としても誤り
• 「`word-wrap: normal;`というプロパティを指定することで」という説明は、デフォルトの挙動（単語の途中では改行しない）に戻す指定であるため誤り
• 「`line-break: strict;`というプロパティを指定することで」という説明は、禁則処理（句読点を行頭に置かないなど）の厳格さを指定するものであり、単語の強制改行とは異なるため誤り
• 「`text-break: force;`というプロパティを指定することで」という説明は、存在しないCSSプロパティであるため誤り