5. 【原创】table设置text-overflow: ellipsis;（超出范围显示...）不生效

最近写的页面中，想让table中的td内容超出文本之后显示'...',但是使用text-overflow: elipsis;没有生效，后来经过试验才摸索出正确的设置方式。

table {
    table-layout: fixed;//表格布局：固定
    width: 200px;  //一点呀设置表格的宽度
}

td {
    white-space: nowrap;//超出文本不换行
    overflow: hidden;//超出文本隐藏
    text-overflow: ellipsis;  //超出文本显示...
}

 还可以使用hover属性设置鼠标悬停的时候显示其内容。

td:hover { 
    text-overflow:inherit; 
    overflow:visible; 
}

 

转载于:https://www.cnblogs.com/Nick-Hu/p/11089001.html