English 中文 العربية 日本語 Português

white-space（空白文字の扱い）プロパティ

最終更新：2026-09-13

white-space white-space（空白文字の扱い）プロパティ

white-space プロパティは要素内の空白文字（スペース、タブ、改行）の扱いとテキストが自動的に折り返されるかを制御します。ブラウザーが連続するスペースをまとめるか、元の書式を保持するか、テキストがあふれたときに改行するかを決めます。コードの表示、書式の保持、1 行の省略記号の効果に欠かせません。

カテゴリ
初期値normal
継承はい
適用対象all
アニメーションタイプdiscrete
CSS バージョンCSS1
状態標準

📝 構文

white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;

⚙️ 値

値タイプ説明
normal | nowrap | pre | pre-wrap | pre-line | break-spacesキーワード空白文字の扱いと折り返しの規則

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
white-space ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザーでサポート
ヒント： 1 行の省略記号には 3 つのプロパティが必要です。white-space: nowrap、overflow: hidden、text-overflow: ellipsis を組み合わせます。
重要： pre-wrap と pre-line の違いは次のとおりです。pre-wrap はすべての空白を保持し折り返します。pre-line はスペースをまとめますが改行は保持し、折り返しもします。

❓ よくある質問

Qwhite-space: normal と nowrap の違いは何ですか？
Anormal は連続する空白をまとめ、コンテナの端でテキストを折り返します。nowrap も空白をまとめますが自動折り返しを禁止するため、テキストは <br> タグに出会うまで 1 行で延び続けます。
Qwhite-space: pre と white-space: pre-wrap はそれぞれいつ使うべきですか？
Apre は元の書式を完全に保持し折り返しません。コードブロックの表示に適しています。pre-wrap も書式を保持しますが、コンテナの端で折り返し、幅に応じたレイアウトに向いています。
Qwhite-space: pre-wrap と pre-line の違いは何ですか？
Aどちらも折り返しを許可します。pre-wrap は連続するスペースを含むすべての空白を保持します。pre-line は連続するスペースをまとめ、改行だけを保持します。字下げを正確に保つ必要があるなら pre-wrap、改行だけを保持したいなら pre-line を使ってください。
text-overflow word-break overflow
white-space — text-fonts チュートリアル

📚 関連チュートリアル

text-overflow プロパティ
あふれたテキストを省略記号でどう表示するかを制御します。
word-break プロパティ
単語の改行規則を制御します。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%