css - 冲突要求 : table columns expand to fill the space available, 但也截断文本

Question

我有一个包含 4 个“固定”列和 1 到 4 个可变宽度列的表格。为了简洁起见，将这些宽度可变的列称为“属性”——让我重复一遍，直到运行时(实际上，直到我进行 AJAX 调用)我才知道有多少列。使用 <table> 完成所有这些工作没有问题并在固定列上设置“宽度”，在可变列上设置“最小宽度”。如果文本多于可变宽度列中容纳不下的文本，则文本换行得很好。但是现在我的老板正在向我扔曲线球。他希望它(有时)不是换行，而是截断文本。我尝试将以下内容添加到 <td> 的类中对于属性列:

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

那并没有做任何事情。所以我将文本包装在 <div> 中的属性列中并在 div 而不是 tr 上设置这些 CSS 参数，但现在发生的是列变得足够大以容纳整个文本，而不是截断它，所以我最终得到了一个数千像素宽的表格水平滚动条。那根本不是我想要的。我可以在 div 上设置一个固定宽度，这会使文本被截断，但是我不会根据有多少列来调整它的大小。我尝试设置 width: 20%在 div 上，但随后我得到一个很大的列，但其中的 div 只占它的 20% - 当然还有一个水平滚动条。

有什么方法可以获得我想要的调整大小，或者我是否会被迫在加载时进行一些计算并相应地设置“宽度”？

fiddle :http://jsfiddle.net/CSUyT/embedded/result/

Answer 1

您需要限制应用 text-overflow 的同一元素的宽度，以使其正常工作。