Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

line-break

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

改行ルール禁則処理

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
line-break
58
14
69
11
58
11
anywhere
83
83
69
13
83
13
auto
25
79
69
7
25
7
loose
25
79
69
8
25
8
normal
1
79
69
2
18
1
strict
25
79
69
8
25
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
  • ベンダープレフィックス付きで対応: -khtml- (2)
削除済み
  • このバージョンで機能が削除されました (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)

基本構文

CSS 
.loose {
  line-break: loose;
}
.strict {
  line-break: strict;
}

ライブデモ

Loose

CSS Loose demo.

プレビュー全画面表示

Normal(normal)

CSS Normal(normal) demo.

プレビュー全画面表示

Strict

CSS Strict demo.

プレビュー全画面表示

実務での使いどころ

  • 日本語テキストの禁則処理設定

    新聞風のレイアウトではloose、書籍風のレイアウトではstrictを設定し、コンテンツの性質に合った改行ルールを適用します。

注意点

  • strictモードでは改行位置が制限されるため、狭いコンテナでは文字がはみ出す場合があります。overflow-wrapと組み合わせて使用してください。

アクセシビリティ

  • 適切な禁則処理は日本語テキストの可読性に大きく影響するため、ターゲットユーザーの読みやすさを優先して設定してください。

参考リンク