HTML:随着表格越来越窄,文本溢出应该会切断越来越多的文本

Question

我有一个网页,其中包含由ASP.NET控件生成的HTML表.表格的顶行模拟工具栏.排在第一行的是这样的:

<tr>
  <td style="white-space:nowrap;">
    <span>Very long title</span>&nbsp;
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

我坚持这样一个事实,即这是一个表格,标题区域的内容放在一个范围内,并且可能使用指定无包装的内联样式.

当页面变窄时,该表应该缩小,并且它做得非常好.但是,如果实际的标题文本(可以变化)太长,它实际上可以限制表格的缩小程度,这可能导致与页面上的其他内容重叠.(我正在使用IE8,BTW.)

我尝试应用overflow:hidden,, text-overflow:ellipsis和display: inline-block跨度并为表格单元格添加宽度值,所有这些都通过样式表.(Display:block在跨度上加倍了行的高度,这是我不想要的,所以inline-block是我的选择.)标题文本显示为截断,正如我想要的那样.但桌子不会变得更窄.

在通过IEDT改变价值观和风格后,我得出结论,当弄清楚桌子有多窄时,文本仍被视为其全长.跨度相对较短,只出现了跨度中出现table-cell的文本,但出于宽度目的,文本仍然存在.

我没有发现任何地方记录这种现象,但也许我只是没有足够的.:)如果text-overflow无法帮助我,我想我将不得不通过脚本动态截断标题,我宁愿不这样做.有没有办法单独通过CSS做我想做的事情？

Answer 1

表格的单元格显示行为与块的常规行为不同.为了使它更典型,您需要先将表的table-layout属性更改为"fixed"并设置表宽度:

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

在大多数情况下,它会禁用单元格的自动调整大小.之后,您可以像往常一样设置td的宽度和溢出.

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

这是一个例子:http://jsfiddle.net/vS3qq/1/