Thymeleafで改行を表示するとき、CSSを使う方法の採用例が少ないのは何故でしょうか?

Question

質問

Thymeleafで改行を表示する方法を調べています。

調べた結果、改行コードを <br> に変換する方法が多く出てきたのですが、
これよりも CSSで white-space: pre-wrap; を適用した方が簡単だと思っています。(下部にサンプルコードを書いておきます)

しかし、その方法の採用例が無かったため、「何か問題があるのでは?」と思いましたが、私の知識では分かりませんでした。
そのため、この方法について、どのような問題があるのかを教えていただきたいです。

CSSを使う方法

<div th:text="${hoge}" class="keep-line-break"></div>

.keep-line-break {
  white-space: pre-wrap;
}

改行コードを <br> に変換する方法

Thymeleafで改行コードをhtmlの改行タグに変換して出力する - Qiita
Thymeleaf3で改行コードを改行タグに変換する独自ダイアレクトを作成 - Qiita
Thymeleaf + Spring : How to keep line break? - Stack Overflow

Answer 1

「正解」を知っているわけではないので、個人的な印象をお伝えします。

サンプルコードのような使い方で言えば、特に問題は起きないように思います。
ただ、white-space: pre-wrap;は、ソース内の改行を全て改行として表示してしまうので、th:textの中身が複雑になったときに、画面上意図しない改行が含まれてしまうようなことは、可能性としては起こりうるでしょうね。
それを考えると、バックエンド側で<br>に置き換えておけば、確実に、画面上改行として表示したい部分のみ改行させられるとは言えるのではないでしょうか？

あとは、歴史的にもHTMLで改行を表示する方法は<br>が基本なので、（white-spaceプロパティは出現が比較的新しいです）ご紹介されているような、主に学習者向けの記事では基本の方を紹介したい気もします。
（特に、この話題だと正規表現を利用した置換がテーマになるので、white-spaceプロパティよりも遥かに応用の幅が広いです）

Comments

[pp616]

回答ありがとうございます。

<br> に変換する方法の方が、
確実で、応用が効いて、伝統的(?)ということを理解しました。

また、前提から抜けていて申し訳ありませんでしたが、
今回表示する文字列は <textarea> に入力して DBに保存したものですので、
th:text の中身が複雑になることは無さそうです。

今回は改行が表示できれば OK なので、
まずは white-space: pre-wrap で実装して、
問題が発覚すれば別の方法を採用したいと思います。

[hallen0225]

はい、それでよろしいかと思います。
HTML、CSSなどの記事と比べて、Thymeleafのような、特定のライブラリに関する記事というのはどうしても少ない傾向にありますので、単純に「white-spaceプロパティを採用した記事を書いた人が少なかった」だけの可能性が高いような気がします。
（それに、Thymeleaf自体が、間違ってもトレンドの技術というわけではありませんし。記事を書く側も、やはり閲覧数は欲しいですからね）

今回のお話も、回答に記載したような例外を除いては「好みの問題」で片付くものなのかなと思っています。ちなみに私が同じようなことをするとしたら、バックエンドで<br>に置換すると思います。