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

【问题标题】：CSS percentage width and text-overflow in a table cell表格单元格中的 CSS 百分比宽度和文本溢出
【发布时间】：2013-06-09 06:34:48
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

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

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

【讨论】：