HTMLで半角スペースの連続をそのまま表示する

ほとんどのブラウザーでは、半角スペースを複数打っても、半角スペース一個分しか表示されません。よって、スペースで間隔を調整することはできません。

この件についてはすっかり忘れていたのですが、元からそう言う仕様でした。ついWordPressの機能かと思ったのですが、そうではありませんでした。

これを解決するには、二つか三つぐらい方法があります。「ぐらい」って言うのが微妙ですが・・・(笑)。

1)ノン・ブレーキング・スペースを使う。

通常のスペースではなく、下記のコードを使います。

&nbps;

これをスペースを空けたい分だけ、打ちまくればいいです。

2)CSSで指定する

white-space:pre-wrap;

または

white-space:pre;

違いですが、テキストがボックスに入っている場合、pre-wrapでは自動改行によりボックスからはみ出ないように表示されますが、preだと改行を入れないとボックスからはみ出るという事態になります。

なお、WordPressのTwenty Seventeenでこれをやったら、記事の題名と本文の間が空きすぎてしまい、見づらくなってしまいました。理由は不明です。仕方がないので・・・

.entry-header {
	margin-bottom:-50px;
	}

・・・で逃げました。このコードでPCでもスマホでもちゃんと表示されるので、良かったです。margin-bottomの値は、お好みで変えてください。なお、元通りの空き方にするには、もっと数値を高くする必要があります。

3)全角スペースを使う

全角スペースなら、その数だけスペースが空きます。

4)CSSでマージンやパディングを指定する。

面倒ですが、読み上げソフトの利用者には、この方法が好ましいです。スペースをいちいち読み上げられたら困りますからね。