【完全ガイド】CSSでテキストの折り返し方法と折り返さない設定

あなたも擦れに体験済みかもしれませんが、日本語だと折り返されるけれど、半角英数が連続して打たれていると折り返されずCSSを無視して文章がはみ出すことがあります。

私はそんな時に折り返し設定を行っています。

CSSのテキスト折り返しの基本

テキストを折り返すためには、word-wrapやwhite-spaceといったCSSプロパティを使います。

.text-container {
  width: 300px; /* コンテナの幅 */
  word-break: break-all; /* 単語で折り返し */
}

この設定を適用すると、長い単語でも適切な場所で折り返され、コンテナの幅に収まるようになります。

テキストを折り返さない設定方法

テキストを折り返さない設定をすることで、特定の情報が一行で表示されるため、ユーザーの視認性が向上します。特に重要なテキストや短いフレーズには、折り返しを無効にするのがオススメです。

以下のCSSを使用すると、テキストを折り返さずに表示できます。

.no-wrap {
  white-space: nowrap; /* テキストを折り返さない */
}

これで、長いテキストでも一行で表示されるようになります。ただし、コンテナの幅を超えると、はみ出してしまうことに注意してくださいね。

word-breakプロパティのオプション

次に、テキストの折り返しに関する重要なプロパティ、word-breakについて見ていきましょう。このプロパティを使うと、テキストの改行方法を細かく制御できます。

normal

通常の単語分割規則に従います。単語の間でしか折り返されません。

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

break-all

単語の途中でも折り返しを許可します。どんなに長い単語でも途中で折りかえされます。URLや長い単語が表示される場合に便利です。

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

keep-all

主にCJK（中国語、日本語、韓国語）のテキストに適用され、単語の途中での折り返しを防ぎます。

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

break-word

単語で折り返されます。

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

white-spaceプロパティのオプション

white-spaceプロパティを使うと、テキストの空白や改行の扱いを詳細に制御できます。以下に各オプションを説明します。

normal

テキスト内の連続する空白を1つにまとめ、折り返しを有効にします。標準的なテキスト表示に使用されます。

.normal {
  white-space: normal;
}

nowrap

テキストを折り返さず、連続する空白を1つにまとめます。ヘッダーや短いフレーズで、折り返させたくない場合に使用します。

.nowrap {
  white-space: nowrap;
}

pre

テキスト内の空白と折り返しをそのまま表示します。プレフォーマットされたテキストに適しています。コードスニペットやプレフォーマットされたテキストを表示する場合に使用します。

.pre {
  white-space: pre;
}

pre-wrap

空白と改行を保持しつつ、必要に応じて改行を挿入します。長いテキストを折り返しつつ、空白と改行を保持したい場合に使用します。

.pre-wrap {
  white-space: pre-wrap;
}

pre-line

空白をまとめ、改行を保持します。

.pre-line {
  white-space: pre-line;
}

CSSでテキストの折り返し方法と折り返さない設定のまとめ

この記事でのポイントをまとめます。

• word-breakプロパティを使って、改行方法を詳細に制御する。
• 英単語の改行にはword-break:allかword-break:wordが良く使われる
• white-space: nowrap;を使って、重要なテキストが折り返されないようにする。
• white-spaceプロパティでテキストの空白と改行をコントロールする。