1.html:
<p style="white-space:pre-wrap">
{{c_str}}
</p>
2.vue.js
data:{
str : "第一行 \n 第二行"
},
computed:{
c_str(){
return decodeURIComponent(encodeURIComponent(this.str)); // 当然不进行编码、解码也可以
}
}
Brief summary:主要是设置white-space的保留处理方式
white-space:pre-wrap 保留了空格+超出边界换行
white-space:pre-line 不保留空格 +超出边界换行
white-space:pre 不保留空格 + 超出边界时不换行
以上代码用vue写的,但其与原生js原理一样。
本文详细解析了Vue中white-space属性的使用方法及其不同值的效果对比,包括pre-wrap、pre-line和pre的区别,帮助开发者更好地掌握文本显示的控制技巧。
1万+

被折叠的 条评论
为什么被折叠?



