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

white-space

white-space は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。

空白処理行折り返し

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
white-space
1
12
1
1
18
1
break-spaces
76
79
69
13.1
76
13.4
normal
1
12
1
1
18
1
nowrap
1
12
1
1
18
1
pre
1
12
1
1
18
1
pre-line
1
12
3.5
3
18
1
pre-wrap
1
12
3
3
18
1
shorthand values

短縮値を受け入れます
114
114
124
114
svg elements

SVG要素について
12
36
textarea support

`<textarea>` のサポート
1
12
36
1
18
1
その他
svg.global_attributes.white-space

ホワイトスペース SVG 属性は、テキスト内のホワイトスペースをどのように処理するかを指定します。 これには、要素内の空白が折りたたまれるかどうか、どのように折りたたまれるか、および強制的にソフトラップされない場合に行が折り返されるかどうかが含まれます。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (3.6)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `white-space-collapse` と `text-wrap-mode` の値のみを受け入れ、`white-space-trim` は受け入れません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `white-space-collapse` と `text-wrap-mode` の値のみを受け入れ、`white-space-trim` は受け入れません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `white-space-collapse` と `text-wrap-mode` の値のみを受け入れ、`white-space-trim` は受け入れません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • `white-space-collapse` と `text-wrap-mode` の値のみを受け入れ、`white-space-trim` は受け入れません。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)

基本構文

CSS 
.nowrap { white-space: nowrap; }
.preserve { white-space: pre-wrap; }
code { white-space: pre; }

ライブデモ

Nowrap(wrap none)

CSS Nowrap(wrap none) demo.

プレビュー全画面表示

Pre-wrap(emptywhiteretain)

CSS Pre-wrap(emptywhiteretain) demo.

プレビュー全画面表示

Pre(equalwidthdisplay)

CSS Pre(equalwidthdisplay) demo.

プレビュー全画面表示

実務での使いどころ

  • コードブロックの整形表示

    プログラミングコードのインデントや空白を保持しつつ、コンテナ幅に合わせて折り返す表示を実現します。

注意点

  • white-space: nowrap はテキストの折り返しを完全に防止するため、コンテナからのオーバーフローに注意してください。

アクセシビリティ

  • white-space: pre でのコード表示では、横スクロールが必要になる場合にキーボードでのスクロール操作が可能であることを確認してください。

参考リンク