改行コードが含まれる文字列をブラウザで改行表示

改行コード(\n)が含まれる文字列をブラウザで改行表示させるときの方法について。ド忘れするのでメモしておく。
サーバーサイドから返ってきたデータに改行コードが含まれており、そのまま表示したら改行されなくて困った時などに使う。

結論、white-spaceを使用しましょう。
空白文字(半角スペースやタブ)、改行などをブラウザでどのように扱うか指定できます。
自動的に折り返す場合や改行するまで折り返さないなどの指定が行えます。

white-space: normal;
// 連続する空白文字を1つの半角スペースとして表示
// 右端で自動で改行

white-space: nowrap;
// 連続する空白文字を1つの半角スペースとして表示
// <br>で改行するまで折り返さない

white-space: pre;
// 連続する空白文字をそのままの状態で表示
// <br>で改行するまで折り返さない

white-space: pre-wrap;
// 連続する空白文字をそのままの状態で表示
// 右端で自動で改行

white-space: pre-line;
// 改行以外の連続する空白文字を1つの半角スペースとして表示
// 改行コード(\n)は改行表示
// 右端で自動で改行

関連記事