aoma blog

エンジニアの日常とか技術とか

webブラウザで複数半角スペースは1つとして表示されてしまう問題の対処方法

やりたいこと

どうしてもスペースでレイアウト調整したい!

事象

半角スペースが連続しているとブラウザでは1つにまとめられて表示される

// 例。半角スペースが5つある場合
<p>aaa     bbb</p>

// ブラウザでは1つに詰められて表示される
aaa bbb

対策

案1. &nbspを使う

nbspとは「no-break space」の略です。

ただし&nbspは半角スペースという意味ではないため、これを使って調整しているのは平成時代の古いものです。

令和時代は&ensp;&emsp;を使ったほうがいいかもしれません。(見たことないですが)

ちなみにen(エン)は大文字N、em(エム)は大文字Mの幅のことで、どちらも単位です。

案2. preタグを使う

<pre>で囲めば半角スペースや改行をそのまま表示してくれます。

案3. white-space: pre-wrap; を使う

cssのwhite-space プロパティを使う方法もあります。

white-space - CSS: カスケーディングスタイルシート | MDN

preタグは自動折り返しをしてくれないので、pre-wrap;を使うとよいでしょう。

案4. 全角スペースを使う

半角スペース2個を全角スペースに置換して表示してもいいかもしれません。ぬわー。

str_replace('  ', ' ', $str);

さいごに

スペースでレイアウト調整するのは平成で終わりにして、右寄せ、中央揃えなどcssで適切に対応しましょ!