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

Posted 2020-10-31 此地

做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的内容相同