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

Question

我有一个表格，其中单元格的宽度以百分比表示，我想用来text-overflow: ellipsis隐藏长文本行：

在示例中，省略号在 div 中可以正常工作，但在单元格中却不行。它仍然增长并忽略width:60%和max-width:60%。

如果我display:block在单元格中添加 a，文本会在 60% 处停止并获得省略号，但单元格的总宽度仍然是整个文本的大小。

最终，我希望桌子适合屏幕。有没有办法用纯css做到这一点？

score 58 · Accepted Answer

这很容易通过使用来完成table-layout: fixed，但“有点棘手”，因为没有多少人知道这个 CSS 属性。

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

在此处更新的小提琴中查看它的实际效果：http: //jsfiddle.net/Fm5bM/4/

1 回答 1