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. (<code>normal</code>)</p>
<p class="overflow-wrap">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>overflow-wrap</code>)</p>
<p class="word-break">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p class="hyphens">They say the fishing is excellent at 
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, 
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p class="hyphens" lang="en">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
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 Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, German rules)</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
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
完全対応 あり
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Edge 完全対応 18
完全対応 18
完全対応 12
代替名
代替名 非標準の名前 word-wrap を使用しています。
Firefox 完全対応 49
完全対応 49
完全対応 3.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
IE 完全対応 5.5
代替名
完全対応 5.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
Opera 完全対応 あり
完全対応 あり
完全対応 10.5
代替名
代替名 非標準の名前 word-wrap を使用しています。
Safari 完全対応 あり
完全対応 あり
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
WebView Android 完全対応 あり
完全対応 あり
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Chrome Android ? Edge Mobile 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 word-wrap を使用しています。
Firefox Android 完全対応 49
完全対応 49
完全対応 4
代替名
代替名 非標準の名前 word-wrap を使用しています。
Opera Android 完全対応 ありSafari iOS 完全対応 あり
完全対応 あり
完全対応 1
代替名
代替名 非標準の名前 word-wrap を使用しています。
Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

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