Bootstrap table表格信息过长显示省略，鼠标悬停显示详细信息

Bootstrap table文本太长溢出隐藏，鼠标停显示文本内容。

效果如上图所示。
首先想到的是html的title样式，是最常用的，但是无奈bootstrap table的html都是封装好的，想要修改源码不可能完全获取dom元素进行更改，这样改太过于麻烦且出错率比较高。所以我网上找了一些资料来实现这个功能。

1.在bootstrap table配置部分的columns里如下写：

columns: [
{
field : “region_total_name”,
title : ‘区域’,
cellStyle:formatTableUnit,
formatter :paramsMatter
}
]
2.定义方法：

//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,index, field) {
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”
}
}
}
这样就可以了，也可以在columns里面写

columns: [
{
field : “work_desc”,
title : ‘工单描述’,
formatter : function(value, row, index, field){
return “”+value+"";
},
cellStyle : function(value, row, index, field){
return {
css: {“min-width”: “150px”,
“white-space”: ‘nowrap’,
“text-overflow”: ‘ellipsis’,
“overflow”: ‘hidden’,
“max-width”:“300px”
}
};
}
}
]
但这样会有个问题就是value里面要是有‘<’,’/’,’{ }’,’ '等都不可以显示完全的，要进行处理。