3

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

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

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

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

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

4

2 回答 2

1

You need to constrain the width of the same element you're applying text-overflow to in order for it to work correctly.

于 2013-05-06T17:35:22.040 回答
0

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>
于 2013-05-06T17:58:12.617 回答