HTMLでラベル表示すると連続した半角スペースが1つに丸められる件

もしかしたら、「そんなの常識だよ」レベルなことかもしれないが、知らなかったのでメモ。。。

---

HTMLで文字列を表示する方法はいろいろあると思う。
labelタグで囲う、表組されている場合はtdタグにそのまま出力、spanタグで囲う、などなど。
これらの方法で、半角スペースが連続して入っている文字列を設定すると、半角スペースが1つに丸められてしまう。

例

<td>
    string   end
</td>

と記述すると

string end

と表示される。

この対策としてさっと思い浮かんだのは、preタグで囲う方法。
これでいくと上手いこと連続した半角スペースが表示される。

例2

<pre>
    string   end
</pre>

と記述すると

string   end

と表示される。

万事解決と思ったが、1つ問題が発生。
表示する領域の幅は限定されているが、preタグは自動で折り返さないため、
表示領域の幅以上の文字列を指定すると幅を超えてはみ出てしまう。

この問題の対策として1番最初に思いついた方法はスタイルに「word-break:break-all;」を指定して折り返しを強制する方法。
しかし、preタグにはこの方法では自動折り返しはかからない。
「word-wrap:break-wod;」についても同様に効果がなかった。

調べてみたところ、preタグで自動折り返しをするにはスタイルに「white-space: pre-wrap;」を指定すればできるとのこと。

例3

<td style="width:100px;">
    <pre style="white-space: pre-wrap;">
        start                string             end
    </pre>
</td>

と記述すると100pxあたりで折り返しがかかる。

この方法で晴れて連続した空白を表示し、表示領域内に幅を収めることができた。

「white-space: pre-wrap;」ってpreタグだけにしか効かない？

一件落着したと思ったが、「white-space: pre-wrap;」ってpreタグにしか効かないのか？そもそもこの指定がtdやlabelに効けばpreタグで囲い直す必要がない。
結論、効果あり。

例3

<td style="width:100px;white-space: pre-wrap;">
    start                string             end
</td>

これにて一件落着。

詳しくは

white-spaceについて詳しくはこちらを参照するのが吉。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space