Tailwind CSS 練習問題 55：空白・改行制御
Tailwind CSSにおいて、要素内のテキストが親要素の幅を超えた場合でも、自動的な改行を行わずに1行のまま水平方向に表示を継続させたい場合、正しいものはどれか。
- テキストの自動的な改行を禁止して1行で表示するクラスは「whitespace-nowrap」である。
- テキストの自動的な改行を禁止して1行で表示するクラスは「flex-nowrap-text」である。
- テキストの自動的な改行を禁止して1行で表示するクラスは「text-no-wrap-all」である。
- テキストの自動的な改行を禁止して1行で表示するクラスは「prevent-wrap-line」である。
- テキストの自動的な改行を禁止して1行で表示するクラスは「display-inline-row」である。
正解と解説を見る
正解：テキストの自動的な改行を禁止して1行で表示するクラスは「whitespace-nowrap」である。
テキストが親要素の幅を超えても自動的に改行させず、1行のまま表示を続けたい場合は「whitespace-nowrap」を使用するのが正解です。
【正解の理由】
「whitespace-nowrap」を指定するとCSSの「white-space: nowrap;」が適用され、テキストの折り返しが禁止されます。横スクロールするリストなどでよく利用されます。
【不正解の理由】
• 「flex-nowrap-text」はFlexboxの折り返し制御（flex-nowrap）と混同させる架空のクラス名であるため誤り
• 「text-no-wrap-all」はTailwind CSSに存在しない架空のクラス名であるため誤り
• 「prevent-wrap-line」はTailwind CSSに存在しない架空のクラス名であるため誤り
• 「display-inline-row」はTailwind CSSに存在しない架空のクラス名であるため誤り