vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

当我们使用 Vue 的v-html指令渲染包含\n的文本时，必须手动指定才能让换行生效。这是因为 HTML 元素默认不会处理换行符。理解并掌握这个小细节，能让我们的富文本渲染更加符合用户期望。

有时候遇到接口返回一串很长的字符串，里面有换行符需要在页面上直接展示出来。 <p>{{text}}</p> //或 <p v-html="text"></p> 用上面这两种方式都无法让文本换行，因为 v-html 不识别换行符，但是可以识别标签。 解决方法： 1、添加样式 在使用 v-html 时添加样式，white-soace:pre-wrap ,让浏览器保留空白和换行符。 <p v-html="text" style="white-soace:pr

最近用到v-html解析后端返回给我的数据，数据中出现 "\n" 换行符不生效。解决方式：添加 style="white-space: pre-wrap;

如果需要合并空格可以使用： 附：white-space属性（来源于MDN） normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 pre 连续的空白符会被保留。在遇到换行符或者元素时才会换行。 pre-wrap 连续的空白符会被保留。在遇到换行符...

指令来解析包含HTML标签的文本，这样就可以正常渲染换行。文本的换行符（\n）却无法正常换行，而是被替换为空格。1. 使用CSS样式来处理文本的换行，通过设置。2. 保留文本中的空白字符并渲染换行，可以使用。

指令，以在 HTML 中渲染处理后的文本，这时。指令用于输出原始的 HTML，但它不会自动将。在页面上显示为换行，你需要在将数据传递给。因此，如果你从后端接收到的文本包含。来处理这个文本，将所有的。就被正确地显示为换行了。是从后端接收到的包含。

添加样式： style=“white-space: pre-wrap;” <div v-html="content" style="white-space: pre-wrap;"></div>

【代码】解决v-html识别不了\n换行符。

vue中文本换行问题: 一段文字（比如叫test），可能包含\n， 1,如果用{{text}}直接显示，不会换行。 2,直接用v-html=“text”,也不会换行。 解决方法： 在main.js中加以下代码 Vue.prototype.formatWord = function (val) { return val.replace(/\n/g, ‘’) }, 然后在你的.vue文件中 v-htm...

Css 文本换行

v-html 实现不了编译效果