← カテゴリ一覧に戻る

折り返し・はみ出し処理

white-spaceword-breakoverflow-wraptext-overflow

テキストの折り返し方法やはみ出した場合の処理を制御するプロパティです。長いURLやコード、日本語テキストなど様々なコンテンツに対応する方法を解説します。

デモ：white-space の違い

white-space: normal（デフォルト）

これは 複数の スペースと 改行が 含まれる テキストです。

white-space: pre-wrap

これは 複数の スペースと 改行が 含まれる テキストです。

white-space: nowrap

折り返しなしのテキストです。ボックスをはみ出します。

white-space: pre

コード表示に 使われます

デモ：text-overflow: ellipsis（一行省略）

overflow: hidden + text-overflow: ellipsis + white-space: nowrap

これは非常に長いテキストで、ボックスの幅を超えた部分は「...」で省略されます。

複数行省略（-webkit-line-clamp: 2）

これは複数行にわたる長いテキストです。2行を超えた部分は省略されます。3行目、4行目のテキストは表示されません。ここにさらに長いテキストを追加します。

デモ：word-break / overflow-wrap

デフォルト

https://verylongexample.com/path/to/resource

word-break: break-all

https://verylongexample.com/path/to/resource

overflow-wrap: break-word

https://verylongexample.com/path/to/resource

コード例

/* 1行で省略して ... を表示 */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 複数行で省略 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 長いURLなどを必要な時だけ折り返す（推奨） */
.break-word {
  overflow-wrap: break-word;
}

/* どこでも折り返す（英語テキストで単語を壊す） */
.break-all {
  word-break: break-all;
}

/* text-wrap: balance（2023年〜）見出しに最適 */
h1, h2 {
  text-wrap: balance;
}

/* text-wrap: pretty（2023年〜）段落の孤立語防止 */
p {
  text-wrap: pretty;
}

比較：word-break: break-all vs overflow-wrap: break-word

観点word-break: break-alloverflow-wrap: break-word
折り返すタイミングどこでも折り返す（単語の途中も）はみ出す時だけ折り返す
英語単語⚠️ 単語を途中で分断する✅ できるだけ単語を保つ
URL・コード任意の場所で折れる✅ 通常の折り返し点を優先
推奨シーンCJK（日中韓）テキスト混在英語テキスト・URL表示

NEWtext-wrap: balance / pretty — 自動テキスト折り返し最適化（2023年〜）

ブラウザが自動的にテキストの折り返しを最適化する画期的な機能です！見出しの見た目や段落末の孤立語を自動的に改善します。Chrome 114+、Firefox 121+対応。

text-wrap: balance（見出し向け）

見出しの各行の長さを均等に調整します

text-wrap: pretty（段落向け）

段落の最後に1単語だけが残る「orphan」を防ぎます。長い段落テキストに適しています。

/* 見出しの折り返しを均等に（最大4行まで） */
h1, h2, h3 {
  text-wrap: balance;
}

/* 段落末の孤立語を防ぐ */
p {
  text-wrap: pretty;
}

/* その他の値 */
.nowrap { text-wrap: nowrap; }   /* 折り返しなし */
.wrap   { text-wrap: wrap; }     /* 通常の折り返し */

🤖 AIプロンプトテンプレート

CSSのテキスト折り返し・省略プロパティを使った実装例をReact + Tailwind CSSで作成してください。

要件:
- white-space（normal / nowrap / pre / pre-wrap）の違いを並べて比較するデモ
- text-overflow: ellipsisによる1行省略と、-webkit-line-clampによる複数行省略の実装
- word-break: break-all と overflow-wrap: break-word の違いを長いURL・英語テキストで比較するデモ
- text-wrap: balance（見出しの均等折り返し）と text-wrap: pretty（孤立語防止）のデモ
- 省略行数を選択できるインタラクティブなline-clampデモ（1行〜4行切り替え）
- 実用例：カードのタイトル・説明文への省略テキストの適用

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo