【CSS Modules】white-spaceプロパティの使い方

white-spaceプロパティは、HTML要素内のテキストにおける連続する空白文字（半角スペース、タブ、改行コードなど）の扱い方や、テキストの自動折り返しに関する挙動を制御するプロパティです。このプロパティを使用することで、テキストの表示方法を細かく調整し、レイアウトを意図通りに保つことができます。

主な値とその機能は以下の通りです。 normalは、デフォルトの値であり、複数の連続する空白文字は一つにまとめられ、テキストは必要に応じて自動的に折り返されます。これは一般的な文章の表示に適しています。 nowrapは、連続する空白文字は一つにまとめられますが、テキストがコンテナの端に達しても自動では折り返されません。これにより、テキストは一行で表示され続け、要素の幅からはみ出す可能性があります。 preは、HTMLの<pre>タグと同様の挙動を示します。テキスト内の空白文字や改行はそのまま保持され、自動的な折り返しは行われません。等幅フォントでコードなどを表示する際に利用されます。 pre-wrapは、preと同様に空白文字や改行をそのまま保持しますが、コンテナの幅に合わせてテキストは自動的に折り返されます。長いコードスニペットや整形済みテキストで、かつ折り返しが必要な場合に便利です。 pre-lineは、連続する空白文字は一つにまとめられますが、改行はそのまま保持されます。そして、必要に応じてテキストは自動的に折り返されます。 break-spacesは、pre-wrapと似ていますが、連続する空白文字の途中でも改行が可能となり、より柔軟な折り返しが実現されます。

このプロパティを適切に設定することで、ユーザーインターフェースにおけるテキスト表示の可読性やレイアウトの一貫性を確保し、特に可変幅のデザインにおいて重要な役割を果たします。

Copy
1selector {
2  white-space: normal;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません