Question

我有一个包含4个“固定”列和1到4个可变宽度列的表。为了简洁起见，将这些可变宽度列称为“属性” - 让我重新迭代，直到运行时才知道（实际上，直到我进行AJAX调用）有多少。使用<table>并在固定列上设置“width”并在变量列上设置“min-width”时，我没有任何问题。如果文本多于可变宽度列中的文本，则文本包裹得很好。但是现在我的老板向我扔了一个曲线球。他希望如此（有时候）而不是包装，它会截断文本。我尝试将以下内容添加到属性列的<td>类中：

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

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

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

小提琴：http://jsfiddle.net/CSUyT/embedded/result/

Answer 1

您需要约束要应用text-overflow的同一元素的宽度才能使其正常工作。

Answer 2

AFAIK表格不会正确约束事物。如果您尝试使用百分比宽度TD和DIV，它的宽度将超出您指定的范围。

你能使用这样的DIV吗？：

<!DOCTYPE HTML>
<html>
<head>
    <title>Clipped Text</title>
    <style>
    div#container{width:700px;}
    div.clipped{white-space:nowrap;overflow-x:hidden;width:14%;float:left;}
    </style>
</head>
<body>
<div id="container">
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</body>
</html>

冲突的要求：表格列扩展以填充可用空间，但也截断文本

2 个答案: