改行を書いたのに一行になる？white-spaceのnormal・pre-line・pre-wrapを比べよう

文字列には改行を入れたのに、画面では続けて表示された。複数のスペースも、一つに見えることがある。データが消えたのか、CSSのwhite-spaceによる表示の違いなのかを分けよう。

目標は、normal・pre-line・pre-wrapで改行と空白をどう扱うか理解すること。ブラウザだけの作例で、同じ短い文字列を比較できるよ。

同じ文字列を、三つの指定で表示する

作例の中身は、Alphaの後ろに半角スペース二つ、Beta、改行、Gammaという文字列。JavaScriptでは次のように表せる。

const text = "Alpha  Beta\nGamma";

\nはこの文字列では改行を表す。作例には、元の文字列も引用符付きで出し、表示を切り替えても文字列自体が変わらないことを確認できるようにしている。

いずれも必要に応じた折り返しは行える。pre-wrapは、何があっても絶対に横へはみ出さないことを保証する指定ではないよ。

normalでは、元データの改行が見えないことがある

.sample {
  white-space: normal;
}

今回の短い例では、Alpha Beta Gammaが続けて表示される。元の文字列にある改行やスペース二つを、そのまま画面へ再現する指定ではないんだ。

画面幅が狭ければ折り返すことがあるので、見た目が二行だから元の改行が残った、とも判断できない。作例では同じ幅で、三つの指定を比べよう。

pre-lineとpre-wrapの違いを見る

pre-lineではBetaの後ろの改行が残る一方、AlphaとBetaの間の連続スペースはまとまる。pre-wrapでは、その連続スペースも残る。

作例の「表示方法」で切り替えた後、文字列の内容と、二つの単語の間隔を見てみよう。「最初から試す」でnormalへ戻せる。今回の例は改行と半角スペースに絞ったもので、タブやあらゆるUnicode空白を同じように比較した結果ではないよ。

HTMLとして解釈する必要はない

作例ではtextContentで文字を入れている。改行を表示したいだけで、文字列をinnerHTMLへ渡す必要はない。データの扱いと、空白の表示方法は分けて選ぼう。

編集部ではChromiumで三つの指定、行の表示、元データの保持、リセットを確認した。長いURLなど別の折り返し条件は、さらに個別の確認が必要だよ。

文字を安全に表示する方法はtextContentの基本、HTMLの段落と改行の使い分けはpとbrも参考にしてね。