5
vue中v-html识别换行符_插入文本不换行的问题解决总汇
source link: https://www.fly63.com/article/detial/11329
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
v-html解决字符串内根据换行符号自动换行问题，通过加上style="white-space:pre-wrap;"即可识别\n换行操作。
解决方法：
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、正则替换
用正则表达式把 \n 替换成这样 v-html 就可以识别
<p v-html="text.replace(/\n/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的行为相同，除了：
任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK