かとのぼのマイコード・マイライフ

ウェブサービス開発者のブログ

サーバーから取得したテキストの改行の表示はCSSで処理【Vue.js】【CSS】

Firebaseに入れたテキストデータの改行などを行う処置で少し迷ったんですが、CSSを使うと楽だったのでメモです。

Firestoreから取得した文字の改行などはどの方法でブラウザに表示させるか悩みどころ

qiita.com

firestoreに保存したデータをそのまま表示させると改行などはされていません。そのため改行の処理をする必要があります。ただ、この方法が選択肢として複数あります。

ライブラリよりCSSでやった方が楽

Vue.jsのライブラリでやる方法もあったようですが、CSSの

white-space: pre;

のような技を使えば楽チンです。

CSSで頻繁に見られる手法です。

ライブラリは基本的に気軽に入れたくないので、CSSで対処できるのは個人的にありがたいです。

改行方法にはいくつかのパターンがあるのでそれはこちらを参照してみてください。

www.htmq.com