過去バージョン

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>
<!-- 表示: "Hello     World" (5 つのスペース) -->

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

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

各種空白文字

方法2:

 タグ

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

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

方法3: CSS white-space

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

/* テキストエリアやコードブロックでよく使う */
.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'

用途別のおすすめ

アクセシビリティ・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 がデフォルトでそうなる。