テキストの分割と折り返し
このガイドは CSS で管理することができるテキストのはみ出しの様々な方法を説明します。
テキストのはみ出しとは
CSS では、非常に長い単語などの切れない文字列がある場合、既定ではインライン方向に小さすぎるコンテナからはみ出します。下の例で、この現象を見ることができます。長い単語が、ボックスの境界を越えて伸びています。
CSS はこのようにあふれて表示させますが、これは他の方法をとるとデータロスが発生するためです。CSS のデータロスとは、コンテンツの一部が消えてしまうことを意味します。そのため、overflow
の初期値は visible
であり、あふれたテキストを見ることができます。一般的には、あふれた部分は汚くても見えた方が良いものです。overflow
が hidden
に設定されている場合のように、物が消えたり、トリミングされたりすると、サイトをプレビューしたときに気づかないかもしれません。汚くてもオーバーフローは、少なくとも簡単に見つけることができ、最悪、訪問者は多少奇妙に見えたとしてもコンテンツを見て読むことができます。
次の例では、 overflow
が hidden
に設定されている場合に何が起こるかを見てみましょう。
min-content の寸法を探る
コンテンツを溢れずに含むことができるボックスの最小の寸法を探るには、そのボックスの width
または inline-size
プロパティに min-content
を設定してください。
そのため、 min-content
を使用すると、ボックスがあふれてしまう可能性があります。もし、ボックスがコンテンツに必要な最小の寸法まで成長し、それ以上大きくならないようにすることが可能であれば、このキーワードを使用することで、その寸法を得ることができます。
長い単語の分割
ボックスのサイズを固定する必要がある場合や、長い単語がはみ出さないようにしたい場合は、overflow-wrap
プロパティが役立ちます。このプロパティは、単語が長すぎて 1 行に収まらない場合、その単語を分割します。
メモ: overflow-wrap
プロパティは、標準外のプロパティの word-wrap
と同じように動作します。 word-wrap
プロパティは、現在ブラウザーでは標準プロパティの別名として扱われています。
別のプロパティとして、word-break
を試すことができます。このプロパティは、あふれた時点で単語を改行します。単語を改行することで分割せずに表示できる場合でも分割されます。
次の例では、同じ文字列で 2 つのプロパティの違いを比較してみましょう。
これは、文字列に十分なスペースがある場合に、大きなギャップが現れないようにしたい場合に便利です。また、他の要素があって、その直後に改行させたくない場合にも便利です。
以下の例には、チェックボックスとラベルがあります。例えば、ラベルがボックスに対して長すぎる場合には、ラベルを改行したいとします。しかし、チェックボックスの直後では改行してほしくありません。
ハイフンの追加
単語が改行されるときにハイフンを追加するには、CSS の hyphens
プロパティを使用します。auto
の値を使用すると、ブラウザーは自由に選択したルールに従って、適切なハイフネーション位置で自動的に単語を区切ります。プロセスをある程度制御するには、値を manual
にして、ハードまたはソフトブレイク文字を文字列に挿入します。ハードブレイク (‐
) は、その必要がない場合でも、常に改行します。ソフトブレイク (
) は、改行が必要な場合にのみ改行します。
<wbr> 要素
関連情報
- HTML の
<wbr>
要素 - CSS の
word-break
プロパティ - CSS の
overflow-wrap
プロパティ - CSS の
hyphens
プロパティ - Overflow and Data Loss in CSS