为什么CSS省略号在表格单元格中不起作用？
为什么CSS省略号在表格单元格中不起作用？
提问于 2012-04-29 21:07:35
考虑以下示例：(live demo here)
$(function() {
console.log("width = " + $("td").width());
});td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
输出是：width = 139，省略号不会出现。
这里我漏掉了什么？
回答 9
Stack Overflow用户
发布于 2012-10-11 20:05:51
同样重要的是要把
table-layout:fixed;添加到包含表中，因此它在IE9中也可以很好地运行(如果您使用最大宽度)。
Stack Overflow用户
发布于 2014-02-26 20:54:10
如前所述，您可以使用td { display: block; }，但这违背了使用表的目的。
您可以使用table { table-layout: fixed; }，但您可能希望它对某些列的行为有所不同。
因此，要实现您想要的效果，最好的方法是将文本包装在<div>中，并将其应用于<div> (而不是<td>)，如下所示：
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Stack Overflow用户
发布于 2012-04-29 21:11:21
尝试使用max-width而不是width，表格仍然会自动计算宽度。
即使在ie11 (具有ie8兼容模式)下也能正常工作。
td.max-width-50 {
border: 1px solid black;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table>
<tbody>
<tr>
<td class="max-width-50">Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10372369
复制相关文章
相似问题