質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5284閲覧

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

pp616

総合スコア1

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/06/03 11:57

質問

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

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

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

CSSを使う方法

html

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

css

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2021/06/03 12:41

編集2021/06/03 12:44
hallen0225

総合スコア587

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pp616

2021/06/04 03:59

回答ありがとうございます。 <br> に変換する方法の方が、 確実で、応用が効いて、伝統的(?)ということを理解しました。 また、前提から抜けていて申し訳ありませんでしたが、 今回表示する文字列は <textarea> に入力して DBに保存したものですので、 th:text の中身が複雑になることは無さそうです。 今回は改行が表示できれば OK なので、 まずは white-space: pre-wrap で実装して、 問題が発覚すれば別の方法を採用したいと思います。
hallen0225

2021/06/04 09:32 編集

はい、それでよろしいかと思います。 HTML、CSSなどの記事と比べて、Thymeleafのような、特定のライブラリに関する記事というのはどうしても少ない傾向にありますので、単純に「white-spaceプロパティを採用した記事を書いた人が少なかった」だけの可能性が高いような気がします。 (それに、Thymeleaf自体が、間違ってもトレンドの技術というわけではありませんし。記事を書く側も、やはり閲覧数は欲しいですからね) 今回のお話も、回答に記載したような例外を除いては「好みの問題」で片付くものなのかなと思っています。ちなみに私が同じようなことをするとしたら、バックエンドで<br>に置換すると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問