vue中v-html识别换行符_插入文本不换行的问题解决总汇

摘要:v-html解决字符串内根据换行符号自动换行问题,通过加上style=white-space:pre-wrap;在实际开发中,推荐使用css样式来解决换行问题,在这里简单介绍下关于white-space属性有哪些?

v-html解决字符串内根据换行符号自动换行问题,通过加上style="white-space:pre-wrap;"即可识别\ 换行操作。


解决方法:

1、添加样式

在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。

<div v-html="text" style="white-space: pre-wrap;"></div>

2、用 pre 标签包裹

被包围在 pre 标签中的文本通常会保留空格和换行符。

<pre><p v-html="text"></p></pre>

3、正则替换

用正则表达式把 \ 替换成这样 v-html 就可以识别

<p v-html="text.replace(/\
/g,'<br/>')"></p>


white-space属性:

在实际开发中,推荐使用css样式来解决换行问题,在这里简单介绍下关于white-space属性有哪些?

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。
normal:连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

nowrap:和 normal 一样,连续的空白符会被合并。但文本内的换行无效。

pre:连续的空白符会被保留。在遇到换行符或者元素时才会换行。

pre-wrap:连续的空白符会被保留。在遇到换行符或者元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line:连续的空白符会被合并。在遇到换行符或者元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

break-spaces与 pre-wrap的行为相同,除了:

任何保留的空白序列总是占用空间,包括在行尾。
每个保留的空格字符后都存在换行机会,包括空格字符之间。
这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_11329