CSSでテキストの折り返しや改行をコントロール！プロパティの使い方

Webサイトのコーディングで、テキストの改行や折り返しで悩むことはありませんか？長い英単語やURLが要素からはみ出してしまったり、意図しない位置で改行されてレイアウトが崩れたり…。

こんな時は、3つの改行がコントロールできるCSSプロパティで解決していきます。

この記事は white-space、overflow-wrap、word-break という3つのプロパティの特徴と使い方、そしてどう使い分けるかをまとめていきます。

white-spaceを使った改行

white-space プロパティは、要素内の空白文字（スペース、タブ、改行）をどのように扱うかを制御します。

.text {
  white-space: normal;
}

.text {
  white-space: normal;
}

各プロパティを実際に適用した結果は以下の通りです。

overflow-wrapを使った改行

overflow-wrapプロパティ（旧名：word-wrap）は、単語が要素からはみ出そうになったときに、単語の途中で改行するかどうかを制御します。

.text {
  overflow-wrap: normal;
}

.text {
  overflow-wrap: normal;
}

長いURLやハッシュタグ、メールアドレスなど、区切り位置がない長い文字列を扱う場合に特に有効です。

word-breakを使った改行

word-break プロパティは、単語の改行ルールをより積極的に制御します。overflow-wrap よりも強力で、言語による改行規則を変更できます。

.text {
  word-break: normal;
}

.text {
  word-break: normal;
}

break-allは、表組みや狭いカラムなど、スペースが限られている場合に便利ですが、英文の可読性が下がるため慎重に使用しましょう。

それぞれの違い、使い分け

ここまで紹介した3つのプロパティは、それぞれ異なる役割を持っています。適切に使い分けることで、様々な改行問題を解決できます。

プロパティの役割の違い

組み合わせる

複数のプロパティを組み合わせることで、より細かい制御が可能です。例えば汎用的なテキストコンテンツなら以下のような組み合わせ。

.text-content {
  white-space: normal; /* 通常の折り返し */
  overflow-wrap: break-word; /* はみ出し防止 */
  word-break: normal; /* 言語のデフォルトルール */
}

.text-content {
  white-space: normal; /* 通常の折り返し */
  overflow-wrap: break-word; /* はみ出し防止 */
  word-break: normal; /* 言語のデフォルトルール */
}

コメントやレビューなど、どのように入力されるか不明な場合やコード表示によく使われる組み合わせです。

.text {
  white-space: pre-wrap; /* 改行を保持 */
  overflow-wrap: break-word; /* 長いURLなどに対応 */
}

.text {
  white-space: pre-wrap; /* 改行を保持 */
  overflow-wrap: break-word; /* 長いURLなどに対応 */
}

空白と改行を保持しつつ折り返し、長い行のはみ出しを防ぎます。

まとめ

CSSの改行コントロールは、white-space、overflow-wrap、word-break の3つのプロパティで対応できます。

ユーザー投稿コンテンツなら、予測できない長さの文字列に備えて overflow-wrap: break-word を設定しておくのが安全です。

一方、デザイン上改行を許したくない要素には white-space: nowrap を使用するなど、目的に応じて使い分けましょう。

それぞれの特性を理解し、状況に応じて適切に使い分けることで、思い通りの改行表示がしやすくなるはずです。