word-break

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: break-all はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

形式文法

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
word-breakChrome 完全対応 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 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 15Opera Android 完全対応 ありSafari iOS 完全対応 2Samsung Internet Android 完全対応 あり
break-wordChrome 完全対応 1Edge 未対応 なしFirefox 完全対応 67IE 未対応 なしOpera 完全対応 15Safari 完全対応 3WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 67Opera Android 完全対応 14Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
keep-allChrome 完全対応 44Edge 完全対応 12Firefox 完全対応 15IE 完全対応 5.5Opera 完全対応 31Safari 完全対応 9WebView Android 完全対応 44Chrome Android 完全対応 44Firefox Android 完全対応 15Opera Android 完全対応 32Safari iOS 完全対応 9Samsung Internet Android 完全対応 あり

凡例

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

関連情報