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