この記事の要点

HTML は連続する空白を 1 つに圧縮する。半角スペースを並べても 1 つに見える 空白を保持するには:   / <pre> / CSS white-space: pre 幅違いの空白:   (en) /   (em) /   (細) 改行も同様に圧縮される → <br> / white-space: pre-wrap 推奨は CSS で。整形のために &nbsp; 連打はアクセシビリティ的に NG

HTML の空白圧縮ルール

HTML パーサは連続する空白文字 (スペース / タブ / 改行) を 1 つの半角スペースに圧縮します。これは仕様 (CSS の white-space: normal) によるもの:

<!-- ❌ ソース上で 5 つスペースを入れても -->
<p>Hello     World</p>
<!-- 表示は: "Hello World" (1 つに) -->

<!-- 改行も圧縮 -->
<p>Hello
World</p>
<!-- 表示は: "Hello World" -->

方法1:   (Non-Breaking Space)

もっとも基本。圧縮されず、改行もされない半角スペース:

<!-- 連続スペース表現 -->
<p>Hello     World</p>
<!-- 表示: "Hello     World" (5 つのスペース) -->

<!-- 行頭インデント -->
<p>    インデント文字</p>

<!-- 単位や数値の改行禁止 -->
<p>合計 1,000 円</p>
<!-- 「1,000」と「円」の間で改行されない -->

各種空白文字

エンティティ	名前	幅	用途
 	Non-Breaking Space	通常の半角スペース幅 (U+00A0)	改行禁止スペース
 	En Space	1/2 em (U+2002)	欧文の中スペース
 	Em Space	1 em (U+2003)	欧文の広いスペース
 	Thin Space	1/6 em (U+2009)	細い区切り
 	Hair Space	極細 (U+200A)	装飾的に狭く
&zwsp;	Zero-Width Space	0 (U+200B)	改行可ポイントを作る (見えない)
　 または「　」	Ideographic Space	全角 1 文字 (U+3000)	日本語の全角スペース

方法2: <pre> タグ

<pre> 内では空白も改行もそのまま保持されます。コード片や ASCII アート向け:

<pre>
function hello() {
    if (cond) {
        return    "many   spaces";
    }
}
</pre>
<!-- インデントもスペースも改行もすべて保持 -->

方法3: CSS white-space

CSS で空白の扱いを制御するのが現代的な解決法:

white-space 値	連続空白	改行	自動折り返し
normal (既定)	圧縮	圧縮	する
nowrap	圧縮	圧縮	しない (1 行に固定)
pre	保持	保持	しない
pre-wrap	保持	保持	する ★ 推奨
pre-line	圧縮	保持	する
break-spaces	保持	保持	する (行末空白も改行可)

/* テキストエリアやコードブロックでよく使う */
.code {
  white-space: pre-wrap;     /* 改行 + 空白保持、行末で折り返す */
  font-family: monospace;
}

/* タグ風表示で改行禁止 */
.tag {
  white-space: nowrap;
  display: inline-block;
  padding: 2px 8px;
}

/* チャット風 (改行は保持、空白は圧縮) */
.message {
  white-space: pre-line;
}

JavaScript での空白挿入

// textContent はそのまま表示 (HTML エンティティは効かない)
el.textContent = 'a   b';   // 表示: "a b" (圧縮される)

// innerHTML なら HTML エンティティが効く
el.innerHTML = 'a   b';  // "a   b"

// Unicode で直接書く
el.textContent = 'a   b';  // U+00A0 を直接

// 全角スペース
el.textContent = 'a　　b';  // "a　　b"

// 改行
el.textContent = 'line 1\nline 2';   // textContent では \n が改行扱いされない
// → CSS で white-space: pre or el.innerHTML = 'line 1<br>line 2'

用途別のおすすめ

やりたいこと	推奨	避けるべき
余白を作りたい (装飾)	CSS padding / margin	連打
テーブルや桁揃え	CSS Grid / table	連打
「1,000 円」を改行させない	  1 個 or white-space: nowrap	—
コードを表示	<pre><code>	—
ユーザ入力をそのまま表示	white-space: pre-wrap	innerHTML (XSS リスク)
長い単語の折り返し	word-break: break-word	—

アクセシビリティ・SEO 上の注意

•   を装飾目的で多用しない — スクリーンリーダーが余分に読み上げる、検索エンジンも単語分割に失敗する
• 段落の余白は CSS margin / padding で表現
• 桁揃えは表 (table / CSS Grid) で表現
• 「ふ　り　が　な」のような装飾はletter-spacing で

/* 文字間隔を空ける (空白を入れない) */
.spaced {
  letter-spacing: 0.5em;
}

/* インデント */
.indent {
  text-indent: 2em;
}

FAQ

Q: 全角スペースと nbsp の違いは?
A:   は半角幅のスペース、全角スペース (U+3000、「　」) は全角文字幅。日本語文中の見栄えなら全角スペースの方が自然なケースが多い。

Q: 半角スペースを直接書いても表示される場合がある
A: <textarea> や <pre> 内、または CSS white-space: pre/pre-wrap 適用済要素では保持されます。

Q: 改行を半角スペースに置き換えるには?
A: JavaScript で str.replace(/\n+/g, ' ') / CSS では white-space: normal がデフォルトでそうなる。