table表格中的内容溢出应该如何处理(2)-木庄网络博客

一般来说我们会用到如下属性

/*溢出部分样式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //强制在一行显示   
    overflow:hidden;    //溢出的内容切割隐藏   
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
    word-break:keep-all;  //允许在单词内换行   
    color: red;  //这里我自己标识一下   
    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
}

.table-fix {   
    table-layout:fixed;     
}

首先第二个样式是专门给table标签加的，想要实现内容溢出，那么表格必须有固定的宽高，表格内部的tr，td也要有固定的宽高。在用内容溢出之前，先要给table添加table-fix这个类。然后检查自己的tr，td有没有给width，如果没有的话，最好是给个吧，固定的也行，百分比的也行，我主要给的百分比，外边table给固定宽度，里面的tr和td就是百分比的宽度，这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多，你想实现点点点，就给这个格子添加一个.txt-ell的类吧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读 >>

css怎么实现内容超出隐藏效果

常用input文本框内容自动垂直居中并默认提示文字单击为空

分享文字溢出隐藏实例

怎样可以固定table的宽度 table-layout: fixed

html之table和select操作（介绍）

div+css与table有什么区别？

html的表格比较宽溢出怎么设置

使用bootstrap-table实现分页和排序

bootstrap table实现定时刷新数据的方法

div和table在网站中的可用性比较