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的table-layout属性更改为“fixed”并设置表宽度：

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

在大多数情况下，它会禁用单元格的自动调整大小。之后你可以照常设置td的宽度和溢出。

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

以下是示例：http://jsfiddle.net/vS3qq/1/

Answer 2

我认为这就是你要找的东西。首先摆脱style="white-space:nowrap;"。

接下来将您的<span>改为<div>这样的风格：

<div style="height 18px;overflow:hidden;">

高度值必须调整到行高，但这应该有效。

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

2 个答案: