当前位置:首页 » 《关于电脑》 » 正文

vue识别\n换行

15 人参与  2024年04月21日 13:59  分类 : 《关于电脑》  评论

点击全文阅读


在项目中,需要渲染字符串文本,文本中需要通过\n换行, 如果直接渲染的话无法识别\n实现换行。

下面提供两种方式实现换行

1. 使用v-html渲染。

通过正则将字符串中\n转换成v-html可以识别的标签<br />,再通过v-html渲染。

<div v-html="text"></div>
this.text = str.replace(/\n/g,'<br />')

2. 通过css实现

<div style="white-space: pre-wrap;">{{text}}</div>

white-space属性值

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承white-space属性的值。

点击全文阅读


本文链接:http://zhangshiyu.com/post/98357.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1