ZK 关于前台页面分页数据不会自动换行的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/83376184

由于Code太长而现实不全完整的Code,客户让既然提出要求当然我们要改了

刚开始我没有考虑到页面的缩放问题,我是这样写的

我把Code 字符串进行了截取,通过tabUtils来实现的代码如下

public static String getLabel(String str){
        StringBuffer buffer = new StringBuffer();
        if (str.length() > 50) {
            buffer.append(str.substring(0, 50));
            buffer.append("\n");
            buffer.append(str.substring(50, str.length()));
        } else {
            buffer.append(str.substring(0, str.length()));
        }
        return buffer.toString();
    }

 <z:listcell  class="col-lg-4" label="${w:attrCode(each.code)}"/>

页面表面是实现了自动换行,当Code超过50个字符串就换行,这样做有这样几个缺点,当用户缩小浏览器的大小时,Code还是显示不全如下图

     

所以这个方式是错误的,不推荐使用.

然后,ZK操纵的是div,我们可以给他一个分页的css样式,就可以解决客户的这个问题,解决办法如下

推荐使用

 <z:listcell  class="col-lg-4" style="word-wrap: break-word; word-break: normal;" label="${each.code}"/>

总结如下

css 不换行

div{ 
    white-space:nowrap; 
} 

css 自动换行

div{  
    word-wrap: break-word;  
    word-break: normal;  
} 

还有一点:当我们在改bug的同时,要模拟用户来进行测试,各种场景都要进行测试,

猛然发现,我不是软件测试