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

posted @ 2018-04-21 17:04  此地  阅读(5711)  评论(0编辑  收藏  举报