overflow-wrap

overflow-wrapCSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。

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

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

構文

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

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

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

normal
通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。
anywhere
あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
break-word
anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。

形式文法

normal | break-word | anywhere

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

HTML

<p>They say the fishing is excellent at
  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at 
  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, 
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p>They say the fishing is excellent at 
  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, German rules)</p>

CSS

p {
   width: 13em;
   margin: 2px;
   background: gold;
}

.ow-anywhere { 
   overflow-wrap: anywhere; 
}

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

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

.hyphens {
   hyphens: auto;
}

結果

仕様書

仕様書 状態 備考
CSS Text Module Level 3
overflow-wrap の定義
草案 初回定義
初期値normal
適用対象非置換インライン要素
継承あり
計算値指定値
アニメーションの種類個別

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
overflow-wrapChrome 完全対応 23
完全対応 23
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Edge 完全対応 18
完全対応 18
完全対応 12
代替名
代替名 非標準の名前 word-wrap を使用しています。
Firefox 完全対応 49
完全対応 49
完全対応 3.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
IE 完全対応 5.5
代替名
完全対応 5.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
Opera 完全対応 12.1
完全対応 12.1
完全対応 10.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
Safari 完全対応 6.1
完全対応 6.1
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Chrome Android 完全対応 25
完全対応 25
完全対応 18
代替名
代替名 非標準の名前 word-wrap を使用しています。
Firefox Android 完全対応 49
完全対応 49
完全対応 4
代替名
代替名 非標準の名前 word-wrap を使用しています。
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 11
代替名
代替名 非標準の名前 word-wrap を使用しています。
Safari iOS 完全対応 7
完全対応 7
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Samsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 1.0
代替名
代替名 非標準の名前 word-wrap を使用しています。
anywhereChrome 完全対応 80Edge 完全対応 80Firefox 完全対応 65IE 未対応 なしOpera 完全対応 67Safari 未対応 なしWebView Android 完全対応 80Chrome Android 完全対応 80Firefox Android 完全対応 65Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
break-wordChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 5.5Opera 完全対応 10.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報