前端队长の技术博客
今天遇到一个css样式问题：
如图，在table里面，th 的文字如果太长的话，想要显示省略号会使用下面三行代码：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
使用这三行代码的话，需要设置一个宽度：
width: 100px;
但是，由于th是行内元素，直接设置width是无效的。必须加入:
display: block;
或者
display: inline-block;
因为想让所有的th都一行排列，所以应该加入 display:inline-block
但是加入后却换行显示了：
怎么回事呢？inline-block 不是变成行内块的形式一行显示吗？
经过查询知道，inline-block是包含空格、换行符的，所以会导致inline-block产生间距，即会出现换行。
如何处理呢？
解决办法：
table 设置属性宽度和 table-layout:fixed;
table {
width: 100%;
table-layout:fixed;
}
注意：table必须设置 table-layout:fixed; ，文字溢出省略才能生效；
然后，th再进行如下设置即可：
th {
width: 100px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
（完）