【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"
		}
	}
}