【CSS Modules】word-breakプロパティの使い方
word-breakプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
word-breakプロパティは、テキストの改行方法に関する設定を保持するプロパティです。Webページ上で長い単語やURLなどがコンテナの幅を超えてはみ出すのを防ぎ、テキストを適切に表示するために使用されます。これにより、コンテンツがデザインされた領域内に収まり、レイアウトの崩れを防ぐことができます。
主な設定値にはnormal、break-all、keep-allがあります。normalは既定の動作で、一般的な言語の改行ルールに従います。欧米言語では単語の途中では改行されずスペースなどの区切り文字で改行されますが、CJK（中国語、日本語、韓国語）言語では任意の文字間で改行可能です。break-allを設定すると、単語の途中であっても強制的に任意の文字間で改行が許可され、非常に長い文字列がコンテナからはみ出すことなく収まります。長いURLなどの表示に特に有効です。一方、keep-allは、CJK言語において単語の途中での改行を禁止し、単語単位での改行のみを許可します。非CJK言語ではnormalと同じ動作となり、単語の分断による可読性の低下を防ぐことに貢献します。
このプロパティは、レスポンシブデザインやユーザーが入力するテキストコンテンツを扱う際に重要です。テキストの可読性と安定したレイアウトを実現するため、コンテンツの種類や対象言語に合わせて最適なword-break値を設定することが推奨されます。
公式リファレンス: word-break
構文(syntax)
1.element { 2 word-break: normal; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません