table文字溢出显示省略号

今天遇到一个css样式问题：

image.png

如题，在table里面，th 的文字如果太长的话，想要显示省略号会使用下面三行代码：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

使用这三行代码的话，需要设置一个宽度。

width: 100px;

但是th是行内元素，直接设置width是无效的。必须加入:

display: block;
或者
display: inline-block;

因为想让所有的th都一行排列，所以应该加入 display:inline-block

但是加入后却换行显示了：

image.png

怎么回事呢？

inline-block 不是变成行内块的形式一行显示吗？

💡经过查询知道，inline-block是包含空格、换行符的，所以会导致inline-block产生间距，即会出现换行。

如何处理呢？

解决办法：

table 设置属性宽度和 table-layout:fixed;

table {
  width: 100%;
  table-layout:fixed;
}

注意：table必须设置 table-layout:fixed; ，文字溢出省略才能生效；

然后，th再进行如下设置即可：

td {
  width: 100px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

image.png