前端：大数据量下（大于1M），word-break:break-all失效

目录

问题描述：

原因：

解决办法：

1.template中添加如下代码

2.data中添加如下代码

3.Methods中添加如下代码

4.css中添加如下代码

---

问题描述：

在对话框中显示一个字符串，字符串的大小超1M，希望字符串能自动换行，给对话框最大高度，出滚动条。设置word-break:break-all后，字符串前半段能准确换行，但是拖动滚动条到后半段，会有字符串不能准确的自动换行，从而比其他的行要长，出现横向滚动条。

原因：

不是样式原因，是数据量太大，渲染出现问题。

解决办法：

将字符串截成小段，例如，10万个字符为一个小段，放进一个数组中，遍历数组，用多个span显示这个字符串。

vue代码如下：

1.template中添加如下代码

//在dialog中的适当位置添加
<div class="str_style">
    <span v-for="(item,index) in strList" :key="index">{{item}}</span>
</div>

2.data中添加如下代码

data:{
    return{
        strList:[]
    }
}

3.Methods中添加如下代码

//打开对话框时，从父组件传入需要显示的str，随之切分str为strList数组
//你可以在需要的任何地方处理str，方法类似
handleOpenDialog(str){
    this.dialogVisible=true;//显示对话框，此处dialogVisible变量换成显示自己对话框的变量
    let strLength=str.length;
    let repeatNum=Math.ceil(strLength/100000)
    for(let i=0;i<repeatNum;i++) this.strList.push(str.substring(i*100000,(i+1)*100000))
}
//记得关闭对话框时清空strList
handleCloseDialog(){
    this.dialogVisible=false;
    this.strList=[]
}

4.css中添加如下代码

.str_style {
    display:table;
    table-layout:fixed;
    word-wrap:break-word;
    word-break:break-all;
    white-space:pre-wrap;
    text-align:justify;
}