table表格超出部分显示省略号

做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示

设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容

table{
    table-layout: fixed;
}

在需要设置列加上 

<td style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">

white-space:nowrap; 文本以单行显示,不换行

overflow:hidden;      超出部分隐藏

text-overflow:ellipsis;  超出部分以省略号显示

如果想让鼠标放在上边显示全部内容,把td里的内容放在div里,加上title属性

<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${item.REMARK}">${item.REMARK}</div>

div的title属性和div的内容相同

原文地址:https://www.cnblogs.com/suni/p/8902249.html