业务背景
在日常工作过程中,遇到一个字段长度太长的时候,列表展示整个展示的话效果太差,比如这样的
列表展示出现了滚动条,查看列表内容时就不太方便;但是业务的要求是不要用字段内容加title的形式,类似这样
而是需要全部展示,但是不能是滚动条样式的,太麻烦,那么只能是换行展示了。
页面操作
bootstrap支持设置列表宽度,于是设置列表宽度为300px
{
field : 'payOrderNo',
title : '支付订单号',
width: '300px'
},
再次测试页面发现页面没有效果,但是宽度已经设置成功了
问题处理
查阅bootstrap相关属性css设置发现需要在table添加如下属性
style="table-layout:fixed;word-break:break-all;word-wrap:break-word;"
其中:table-layout:fixed; 表示开启表格固定列宽度;
word-break:break-all;word-wrap:break-word; 表示设置表格列自动换行;
整体添加了表格固定列宽属性后的代码
部署项目后查看页面效果
到此,bootstrap设置列表宽度并且换行展示的操作就算完成了。