HTML:随着表格变得越来越窄，文本溢出应该会截断越来越多的文本
我有一个网页，它有一个由ASP.NET控件生成的HTML表。表的顶行模拟工具栏。最上面一行的布局是这样的：
<tr>
<td style="white-space:nowrap;">
<span>Very long title</span>
</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来做我想做的事情？
回答 2
Stack Overflow用户
发布于 2011-10-28 06:28:43
表格的单元格显示行为与块的通常行为不同。要使其更具典型性，您需要先将表的表布局属性更改为"fixed“并设置表宽度：
table { table-layout: fixed; width: 100%; }在大多数情况下，它会禁用单元格的自动调整大小。之后，你可以像往常一样设置td的宽度和溢出。
td.title { white-space:nowrap;overflow: hidden; width: 200px; }下面是示例：http://jsfiddle.net/vS3qq/1/
Stack Overflow用户
发布于 2011-10-28 06:32:23
我想这就是你要找的。首先去掉style="white-space:nowrap;"。
接下来，将您的<span>更改为<div>，如下所示：
<div style="height 18px;overflow:hidden;">高度值必须根据您的线条高度进行调整，但这应该是可行的。
https://stackoverflow.com/questions/7922928
复制相似问题
腾讯云开发者
