BootstrapTable单元格显示文字过长的解决办法

BootstrapTable单元格显示文字过长的解决办法

此时单元格中文字太多,就会造成如下后果,非常的不美观,甚至影响观看。

在这里插入图片描述

通过CSS进行设置:

{
    field: 'WeldComment',
    align: 'center',
    title: app.localize('WeldComment'),
    cellStyle: function (value, row, index) {
              return {
                  css: {
                      "min-width": "40px",
                      "white-space": "nowrap",
                      "text-overflow": "ellipsis",
                      "overflow": "hidden",
                      "max-width": "60px"
                  }
        }
    },

此时,大于设定的最大长度的部分就会以省略号的形式展示。
在这里插入图片描述

当然这样也是不行的,继续修改。

添加如下代码:

formatter: function (value, row, index) {
    var span=document.createElement('span');
    span.setAttribute('title',value);
    span.innerHTML = value;
    return span.outerHTML;
},

这样一来,鼠标悬停在该单元格的时候,完整的内容将浮动显示。

在这里插入图片描述


版权声明:本文为alonelone原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。