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

我有一个网页有一个由ASP.NET控件生成的HTML表格。表格的最上面一行模拟一个工具栏。这顶行的布局有点像这样：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调整了值和风格的变化之后，我得出结论，当弄清楚表格可能变得有多狭窄时，文本仍被视为它的全长。跨度相对较短，只有跨度中出现的文字出现，但对于宽度目的而言，文本仍然在那里。

我没有发现这种现象记录在任何地方，但也许我只是没有得到足够的。 :)如果text-overflow不能帮助我，我想我必须通过脚本动态截断标题，我宁愿不这样做。有没有办法通过CSS来完成我想要的功能？

来源

2011-10-27 Ann L.

表格的单元格显示行为与块的常见行为不同。为了使它更典型的，你需要表的表布局属性更改为“固定”第一，并设置表格的宽度：

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

这将禁用细胞的自动调整其大小大多数情况下。之后，你可以像往常一样设置td的宽度和溢出。

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

这里是例子：http://jsfiddle.net/vS3qq/1/

来源

2011-10-27 22:28:43

谢谢！这解决了它完美！ –

我认为这是你在找什么。首先摆脱style="white-space:nowrap;"。

下一个改变你<span>到<div>风格是这样的：

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

高度值将不得不进行调整以适合行高，但这应该工作。

来源

2011-10-27 22:32:22 Sam

非常感谢。 –

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

回答

相关问题