あきぞらです。
Vue.js
で開発をしていて、
改行を含む文字列をHTML上で反映したい場面に遭遇しました。
今回はその方法について紹介していきます。
改行を含む文字列をtemplate上で出力させる
たとえば。以下のようなVueファイルに、text
という変数があったとします。
textという変数をHTML上で出力させています。
<template> <div> <span> {{ text }} </span> </div> </template> <script> export default { data() { return { text: "aaaa\nbbbb\ncccc" } } } </script>
この場合、「aaaa bbbb cccc
」
のような感じでHTML上に出力されてしまいます。
CSSを修正して解決する
CSSの設定で解決できることがあります。
以下のCSSを設定してみましょう。
<template> <div> <!-- クラスを追加 --> <span class="css-test"> {{ text }} </span> </div> </template> <script> export default { data() { return { text: "aaaa\nbbbb\ncccc" } } } </script> <style scoped> /* これを設定 */ .css-test { white-space: pre-wrap; } </style>
これで改行されて表示されるはずです。