ちょっと良いUIおれおれAdvent Calendar 2024 – 04日目
コメント欄なんかで内容を出力するときは改行をそのまま出したいじゃないですか。\n を <br> に変換するとかそういうの不要で、かつ <pre> と違い折り返すので扱いやすいです。
デモ：
white-space: pre-line で改行を活かす
white-space といえば nowrap で改行させないやつがよく使われてますが、pre-line という改行を活かす値がありまして、こいつが便利です。
.comment {
white-space: pre-line;
}
空白文字も出すなら pre-wrap
pre-line は改行を活かす一方で空白文字は通常の HTML の出力と同様潰れてひとつに統合されます。段落下げが重要な場合は pre-wrap を使うと空白文字もそのまま出力されます。
pre は折り返さない
必要な場面もあるかと思いますが、コメントは領域の端で折り返してほしいので pre は違うかなと思います。
おしまい
Markdown でもいいけどただのテキストとしてそのまま出しちゃうのが楽です。あれこれ変換するより安全だし。