改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita

はじめに HTMLタグの要素内容として、改行コードを含む文字列を埋め込んだ場合に改行の見せ方をブラウザ側で調整する方法がわかりました。 vue.jsを使用したプロジェクトなのでVue.jsのコンポーネントを使用していますが、vue.jsとかmustache記法は関係ありません。 困っていること 何もしないと、こんな感じになります。 エラーメッセージとはいえ、美しく表示させたいのでエラーメッセージ毎に改行表示させたい。 JS側のコードになるべくHTMLタグを入れ込みたくない。 実行結果 サンプルコード <template> ... <strong>Error:&nbsp;{{message}}</strong> ... </template> <script> export default { data() { return { message: `User nameは必須項目です。 E-m

[reboot_in]

“今回は「white-space: pre-wrap」と「word-wrap:break-word」を指定しました。”