line-break

line-break は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。

/* キーワード値 */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

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

構文

auto
既定の改行規則を使用してテキストを改行します。
loose
最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
normal
最も一般的な改行規則を使用してテキストを改行します。
strict
最も厳格な改行規則を使用してテキストを改行します。
anywhere

句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 word-break プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定値
アニメーションの種類個別

形式文法

auto | loose | normal | strict | anywhere

テキストの折り返しの設定

"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。

HTML

<div lang="ja">
  <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
  <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
  <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
  <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
  <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
</div>

CSS

.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
.auto { line-break: auto; }
.loose { line-break: loose; }
.normal { line-break: normal; }
.strict { line-break: strict; }
.anywhere { line-break: anywhere; }

Result

仕様書

仕様書 状態 備考
CSS Text Module Level 3
line-break の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
line-breakChrome 完全対応 58
完全対応 58
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 14Firefox 完全対応 69IE 完全対応 5.5
完全対応 5.5
完全対応 8
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 45
完全対応 45
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 11
完全対応 11
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 2 — 3
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android 完全対応 58
完全対応 58
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 58
完全対応 58
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android 完全対応 43
完全対応 43
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 11
完全対応 11
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 7.0
完全対応 7.0
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。