一、问题描述
- 含有
\n
的字符串换行显示时未换行被识别为空格,场景如下:
<template>
<div class="box">{{ data.str }}</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
str: '加油\n乐'
})
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>
二、解决方法
1、使用css属性white-space: pre-wrap;解决
在css中
white-space
属性用来控制容器的文本中带有空白符、制表符、换行符等的显示。normal
:默认,忽略文本中所有的空白、换行符;只有文本存在 或文本达到框的约束时,文本才会换行。pre
:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在 或文本中有换行符时,文本才会换行。nowrap
:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行。pre-wrap
:和pre类似,保留文本中的空白、换行符;文本存在 或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。pre-line
:会略文本中的空白符;文本存在 或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。
<template>
<div class="box">{{ data.str }}</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
str: '加油\n乐'
})
// const { } = toRefs(data)
</script>
<style scoped lang="scss">
.box{
white-space: pre-wrap;
}
</style>
效果:
2、使用JS方法replace将字符串里的\n
替换为<br>
- 通过JS方法replace将字符串里的
\n
替换为<br>
后,使字符串渲染为innerHTML
<template>
<div class="box" v-html="data.newStr"></div>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
const data = reactive({
str: '加油\n乐',
newStr: '',
})
data.newStr = data.str.replace(/\n/g, '<br>');
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>
效果: