解决用v-html插入的文本不换行

vue中文本换行问题:

问题描述：

问题

一段文字（比如叫test），可能包含\n，

1、如果用{{text}}直接显示，不会换行。

2、直接用v-html=“text”,也不会换行。

第一种解决方法：运用正则的方式

//js部分  在main.js中加以下代码
Vue.prototype.formatWord = function (val) {
  return val.replace(/\n/g, '<br>')
},
//html部分
<div v-html="formatWord(test)"></div>
 

第二种解决方法：css样式 white-space

// CSS部分
.text-wrapper {
  white-space: pre-wrap;
}
 
//html部分
<div>{{text}}</div>

第三种解决方法： 网上说的使用<pre></pre>便签,我也尝试了,换行是有用了,但是我的文字太多了,原本多余的文字没有设置换行,所以这下样式有不对了

首先，使用pre标签pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符（例如：\n）。而文本也会呈现为等宽字体。但是又出现了问题，数据太长会超出，不会换行显示，加上以下?样式：

pre {
    white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word;
}

html展示一长串数字、英文字母连在一起时不能自动换行！！！

解决方法：

设置css属性：

word-break:break-all;
word-wrap:break-word

补充：

word-break：主要是让浏览器实现在任意位置的换行。

• normal：使用浏览器默认的换行规则。
• break-all：允许在单词内换行。
• keep-all：只能在半角空格或连字符处换行。

table表格中的内容如果是中文，一般情况下都会自动换行。但如果内容是英文或数字，内容过长时文字会飘到单元格之外，也就是内容不会自动。