前端队长の技术博客

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

image

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

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

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

width: 100px;

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

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

因为想让所有的th都一行排列,所以应该加入 display:inline-block 但是加入后却换行显示了:

image

怎么回事呢?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;
}

image

(完)