css 文字列折り返し

CSS 文字列の折り返し: nowrap、break-word、word-break 属性の詳細

この記事では、CSS で文字列の折り返しを制御する3つの重要な属性、 `white-space: nowrap`、`word-break: break-all`、`overflow-wrap: break-word` について詳しく解説します。これらの違いと使用方法を理解することで、Webページ上のテキストのレイアウトを柔軟に制御できます。

1. `white-space: nowrap;` -- 強制的に折り返しを禁止する

この属性は、テキストの内容を1行で表示することを強制し、`
` タグやその他の強制改行文字がない限り、自動的に改行されません。

1.1. 用途

氏名、日付、キーワードなど、フレーズやコードスニペットの完全性を維持する。
画像カルーセルのタイトルなど、水平スクロール効果を作成する。

1.2. 例


<p class="no-wrap">これは折り返しされないテキストです。</p>


.no-wrap {
  white-space: nowrap;
}

2. `word-break: break-all;` -- 単語の途中で改行することを許可する

この属性は、ブラウザが任意の文字位置で改行することを許可します。単語の途中であっても改行されるため、単語が途中で切れて表示される可能性があります。

2.1. 用途

URL、コードスニペットなど、長い単語や特殊文字を含むテキストを処理し、長い単語によるレイアウトの崩れを防ぐ。

2.2. 例


<p class="break-all">これは非常に長い単語を含むテキストです。word-break: break-all; を使用すると、単語の途中で改行されます。</p>


.break-all {
  word-break: break-all;
}

3. `overflow-wrap: break-word;` (旧称 `word-wrap: break-word;`) -- 長い単語を改行する

この属性は、ブラウザが長い単語やURLアドレスの内部で改行することを許可し、長い単語によるレイアウトの崩れを防ぎながら、単語の完全性をできる限り維持します。

3.1. 用途

記事の内容、コメント欄など、長い単語やURLアドレスを含むテキストを処理し、可読性を保ちながらレイアウトの崩れを防ぐ。

3.2. 例


<p class="break-word">これは非常に長い単語を含むテキストです。overflow-wrap: break-word; を使用すると、単語の途中で改行されますが、単語の完全性はできる限り維持されます。</p>


.break-word {
  overflow-wrap: break-word;
}

まとめ

属性	説明	用途
`white-space: nowrap;`	強制的に折り返しを禁止する	短いフレーズやコードスニペットの完全性を維持する、水平スクロール効果を作成する
`word-break: break-all;`	単語の途中で改行することを許可する	長い単語や特殊文字を含むテキストを処理し、レイアウトの崩れを防ぐ
`overflow-wrap: break-word;`	長い単語を改行する	長い単語やURLアドレスを含むテキストを処理し、可読性を保ちながらレイアウトの崩れを防ぐ

`white-space: nowrap` は強制的に折り返しを禁止し、`word-break: break-all` は単語の途中で改行することを許可し、`overflow-wrap: break-word` は長い単語を改行します。実際のニーズに応じて適切な属性を選択することで、最適なテキストレイアウトを実現できます。