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

用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样式

// 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表格中的内容如果是中文，一般情况下都会自动换行。但如果内容是英文或数字，内容过长时文字会飘到单元格之外，也就是内容不会自动换行，这时候需要配合属性word-wrap:break-word;和word-break:break-all;一起使用。