表格单元格中的CSS百分比宽度和文本溢出

gcuhipw9  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(188)

我有一个表格,其中单元格的宽度以百分比表示,我想使用text-overflow: ellipsis来隐藏长文本行:
http://jsfiddle.net/Fm5bM/
在本例中,省略号在div中可以正常工作,但在单元格中不行。它仍然会增长并忽略width:60%max-width:60%
如果我在单元格中添加一个display:block,文本确实会在60%处停止并得到省略号,但单元格的总宽度仍然是整个文本的大小。
http://jsfiddle.net/Fm5bM/3/
最终,我希望table适合屏幕。有没有一种方法可以用纯css来实现?

wr98u20j

wr98u20j1#

使用table-layout: fixed很容易做到这一点,但“有点棘手”,因为没有多少人知道这个CSS属性。

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

在更新的fiddle中查看它的实际操作:http://jsfiddle.net/Fm5bM/4/

相关问题