【備忘録】html上の改行を挿入する

概要

下記のようなケースの対処法

• ESLintでHTMLに直接改行したら怒られる
  こんな時

<div>
おはようございます。
今日もいい天気ですね
</div>

• Javascript側に変数用意しても直接改行しても怒られる
  こんな時

<script>
const s = 
"おはようございます。
今日もいい天気ですね"
</script>

• <p></p>で括ってもformatterで改行が解除されてしまう
  こんな時

<p>
おはようございます。
今日もいい天気ですね
</p>

対応

1. JavaScriptに変数を用意する
   この時、改行したい時に改行文字\nを入れる
2. 上で生成した変数をhtmlで読み込む
   この時<p>で囲む
3. CSSにwhite-space: pre-lineを挿入

動作

See the Pen 改行 by ishikawa takumi (@ishikawa-takumi) on CodePen.