CSS百分比宽度和文本溢出

问题描述

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

I have a table where the cells' width is in percentage and I want to use text-overflow: ellipsis to hide long lines of text:

在示例中，省略号在div中正常工作，但不在单元格中。它仍然增长并忽略 width：60％和 max-width：60％。

In the example the ellipsis works fine in a div but not in the cell. It still grows and ignores both width:60% and max-width:60%.

如果我添加一个 display：block 到单元格，文本停止在60％，并得到省略号，但总宽度该单元格仍然是整个文本的大小。

If I add a display:block to the cell, the text does stop at 60% and gets the ellipsis, but the total width of the cell is still the size of the whole text.

最后，我希望表格适合屏幕。有没有办法用纯css？

Ultimately, I want the table to fit the screen. Is there a way to do it with pure css?

推荐答案

这很容易通过使用 layout：fixed ，但有点棘手，因为没有多少人知道这个CSS属性。

This is easily done by using table-layout: fixed, but "a little tricky" because not much people know about this CSS property.

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

在更新的小提琴上看到它：

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/

这篇关于CSS百分比宽度和文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！