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

メモ: overflow-wrap とは対象的に、 word-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
行内で適切に改行できる場所が他にない場合に限って、単語の途中でも改行するようにします。

形式文法

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11215

5.51

8 -ms- 2

15 あり
keep-all44 なし155.5319
break-word あり なし なし なし あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり18 あり15 なし ? あり
keep-all あり あり なし15 なし9 あり
break-word あり あり なし なし あり あり あり

1. No version of Internet Explorer supports the initial value.

2. Don't use -ms-word-break, which is a synonym for word-break.

関連情報

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

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