栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

前端:大数据量下(大于1M),word-break:break-all失效

前端:大数据量下(大于1M),word-break:break-all失效

目录

问题描述:

原因:

解决办法:

1.template中添加如下代码

2.data中添加如下代码

3.Methods中添加如下代码

4.css中添加如下代码


问题描述:

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

原因:

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

解决办法:

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

vue代码如下:

1.template中添加如下代码
//在dialog中的适当位置添加

    {{item}}

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 

4.css中添加如下代码
.str_style {
    display:table;
    table-layout:fixed;
    word-wrap:break-word;
    word-break:break-all;
    white-space:pre-wrap;
    text-align:justify;
}

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/774074.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号