HTMLで空白を省略させない方法

結論

検索すると色々なやり方が出てきますが、個人的にはCSSのwhite-spaceプロパティをpre-wrapに設定する方法が一番しっくりきました。

span {
  white-space: pre-wrap;
}

---

発生状況

画面幅が狭いときに文章を画面幅ギリギリで改行するのではなく、<span>タグで囲った部分で優先的に改行してほしい。

<div>
  <span>Please start a new line here </span><span>if the screen width is narrow.</span>
</div>

そこで、CSSは次のように設定した。

span {
  display: inline-block;
}

しかし、プレビューの仕切りをスライドするとわかるように、画面幅が狭いときには意図した表示となっているが、画面幅が広く一行で表示される際に1つ目の<span>タグの最後に含めた空白スペースがHTMLの仕様により無視されてしまった¹。

対処

そこで、<span>タグのwhite-spaceプロパティをpre-wrapとすることで、空白スペースをそのまま表示できるようにした。

  span {
    display: inline-block;
+   white-space: pre-wrap;
  }

1. 連続したホワイトスペースは多くの場合、1 文字の空白にまとめられます（Whitespace (ホワイトスペース) | MDNより引用）

   ↩