CSSword-break プロパティは、改行しなければテキストがコンテンツボックスをあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

構文

/* キーワード値 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* 標準外 */ 

/* グローバル値 */
word-break: inherit;
word-break: initial;
word-break: unset;

word-break プロパティは、下記のリストの中から 1 つを選んで指定します。

normal
既定の改行ルールを使用します。
break-all
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
keep-all
CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
break-word
行内で適切に改行できる場所が他にない場合に限って、単語の途中でも改行するようにします。

メモ: word-break: break-word および overflow-wrap: break-word (see overflow-wrap) とは対象的に、 word-break はテキストがコンテナーをちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

形式文法

normal | break-all | keep-all | break-word

HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>4. <code>word-break: break-word</code></p> 
<p class="breakWord narrow">This is a long and 
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

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

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

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

仕様書

仕様書 状態 備考
CSS Text Module Level 3
word-break の定義
草案 初回定義
初期値normal
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 15IE 完全対応 5.5
補足
完全対応 5.5
補足
補足 No version of Internet Explorer supports the initial value.
完全対応 8
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Don't use -ms-word-break, which is a synonym for word-break.
Opera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 15Opera Android 未対応 なしSafari iOS ? Samsung Internet Android 完全対応 あり
keep-allChrome 完全対応 44Edge 完全対応 ありFirefox 完全対応 15IE 完全対応 5.5Opera 完全対応 31Safari 完全対応 9WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 15Opera Android 未対応 なしSafari iOS 完全対応 9Samsung Internet Android 完全対応 あり
break-wordChrome 完全対応 ありEdge 完全対応 ありFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

このページの貢献者: mfuji09, cobodo, sutara79, yyss, teoli, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,