あきぞらです。
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>
これで改行されて表示されるはずです。