【CSS Modules】overflow-wrapプロパティの使い方
overflow-wrapプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
overflow-wrapプロパティは、要素内の長い単語の改行方法を制御する値を保持するプロパティです。このプロパティは、長い単語やURLなどが要素の境界からはみ出すのを防ぎ、レイアウトの崩れを回避してテキストをコンテナ内に収めるために使用されます。
主な値はnormalとanywhereです。normalでは、行の途中で改行できない長い文字列は、改行が許可されている場所でのみ改行し、それ以外では要素からはみ出して表示されます。これは、一般的な文書の禁則処理ルールに従った挙動です。
一方、anywhereでは、長い単語が要素の境界に達した際、単語の途中でも強制的に改行が行われます。これにより、コンテナ幅を超える単語による横スクロールや表示崩れを防ぎます。特に、レスポンシブデザインにおいて、あらゆる画面サイズでテキストを適切に表示するのに役立ちます。
このプロパティは、テキストの可読性とレイアウトの安定性を高め、ユーザーが快適に情報を閲覧できるウェブサイト構築に貢献します。
公式リファレンス: overflow-wrap
構文(syntax)
1selector { 2 overflow-wrap: break-word; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません