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

この記事は移転しました。約5秒後に新記事へ移動します。
移動しない場合はココをクリックして新サイトをお楽しみください。

やりたいこと

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

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

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

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

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

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

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

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

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

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

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

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

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

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