【HTML】Bootstrap || 列表超长隐藏 | 超长隐藏

一、来龙去卖

        1、使用bootstrap

        2、table数据

        3、列数据过长导致样式错乱

二、解决方案

{
  field : "name",
  title : "姓名",
        // 超长隐藏
  cellStyle:formatTableUnit,
        // 鼠标放上显示
  formatter :paramsMatter
}
 
// 表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,index) {
  var span=document.createElement("span");
  span.setAttribute("title",value);
  span.innerHTML = value;
  return span.outerHTML;
}

// td宽度以及内容超过宽度隐藏
function formatTableUnit(value, row, index) {
  return {
    css: {
      "white-space": "nowrap",
      "text-overflow": "ellipsis",
      "overflow": "hidden",
      "max-width":"150px"
    }
  }
}