1.这是JS 鼠标悬停显示全部隐藏的内容
/**
* initHoverTitle
* 使用说明:参数(id的名称字符串格式,表格td的要显示全部的class名称字符串格式)
* table必须添加类.table_ellipsis,
* td必须添加class为.td_ell
* td内容用 <span class="ell">内容</span> 嵌套
* @param idname
* @param contentClassName
*/
function initShowContent(idname,contentClassName){
var _table=$("#"+idname +" "+"."+contentClassName);
var cellIndex1 = parseInt(_table.length) - 1;
_table.each(function() {
if (this.cellIndex != cellIndex1) {
$(this).attr("title", $(this).text());
}
});
}
2.这里是使用的嵌套方式,table加table_ellipsis样式,要控制的td添加class="td_ell" 嵌套一个span 添加class="ell" 此元素上定义宽度
/*表格内容超出内容点点点,不影响table自适应宽度*/
.table_ellipsis td {
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
}
.table_ellipsis td.td_ell {
overflow: hidden;
text-overflow: ellipsis;
}
.ell {
display: inline-block;
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/
}
<div class="divContainBox" id="containBox">
<table id="tabColor" class="tab table_ellipsis" border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr>
<td class="tHead paddingLeft_10" width="30">序号</td>
<td class="tHead">登记日期</td>
<td class="tHead">操作员账号</td>
<td class="tHead">操作员姓名</td>
<td class="tHead">备注</td>
</tr>
<tr class="tabTr">
<td class="paddingLeft_10">1</td>
<td>2018-12-24</td>
<td>xqq</td>
<td>寒寒</td>
<td class="td_ell">
<span class="ell" style="width: 160px;">这是备注</span>
</td>
</tr>
</table>
</div>
3.调用方式
$(document).ready(function() {
initShowContent("containBox","td_ell");
});