CSSoverflow-wrap プロパティは、テキストが包含ボックスをあふれないように、ブラウザーが単語の途中で改行を入れるかどうかを指定します。

メモ: word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

このプロパティはもともと、標準外かつ接頭辞のない word-wrap と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 overflow-wrap に改名されたため、 word-wrap は別名になりました。

構文

/* キーワード値 */
overflow-wrap: normal;
overflow-wrap: break-word;

/* グローバル値 */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

overflow-wrap プロパティは、下記の値一覧中の一つのキーワードで指定します。

normal
通常の単語の分割位置でのみ改行することを示します。
break-word
行内に改行可能な箇所がないときに、通常分割できない単語を任意の箇所で分割して改行することを示します。

形式文法

normal | break-word

この例は、長い単語が分割されるときの overflow-wrap, word-break, and hyphens の結果を比較するものです。

HTML

<p class="normal">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (normal)</p>
<p class="overflow-wrap">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (overflow-wrap)</p>
<p class="word-break">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (word-break)</p>
<p class="hyphens">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (hyphens)</p>

CSS

p {
  width: 13em;
  background: gold;
}

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

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

.hyphens {
  hyphens: auto;
}

結果

仕様書

仕様書 状態 備考
CSS Text Module Level 3
overflow-wrap の定義
草案 初回定義

初期値normal
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

あり

11

121

49

3.51

5.51

あり

10.51

あり

11

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

あり

11

? あり1

49

41

あり

あり

11

?

1. Supported as word-wrap.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dynamis, momdo, Sebastianz, mitsuba-clover, ethertank, sosleepy
最終更新者: mfuji09,