【CSS】改行を反映したいとき

サーバー側で改行コードを処理してくれず、cssで改行を反映させる場合の備忘録

【解決方法】cssの「white-space: pre-wrap;」で改行を反映

cssのwhite-space: pre-wrap;を使えば改行コードを改行させた上で出力することが可能。
以下は、出力されるテキストが「ここで\n 改行したいです」と、改行コードがそのままの場合の例

<style type="text/css">
p{
	white-space: pre-wrap;
}
</style>

<!-- css反映前（改行が反映されない、ブラウザ上の表示） -->
ここで 改行したいです
<!-- css反映後（改行が反映される、ブラウザ上の表示） -->
ここで 
改行したいです

※\nは改行コード、ブラウザ上には表示されない

注意１：タブなどスペースも反映されてしまうので詰めて書く必要がある

white-space: pre-wrap;を使う注意点として、エディタ上でタブやスペースが入っているとブラウザ上で表示されてしまう。

<!-- エディタ上でこういう書き方していると -->
<p>
	ここで\n 改行したいです
</p>
<!-- ブラウザ上で以下のように表示される-->
    ここで
 改行したいです    

なので、white-space: pre-wrap;を使うならエディタ上で詰めて書く必要がある。

<!-- エディタ上で詰めて書く -->
<p>ここで\n 改行したいです</p>
<!-- ブラウザ上でも詰まって表示される-->
ここで
改行したいです