考虑以下示例:(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
,省略号不会出现。
这里我漏掉了什么?
发布于 2012-10-11 20:05:51
同样重要的是要把
table-layout:fixed;
添加到包含表中,因此它在IE9中也可以很好地运行(如果您使用最大宽度)。
发布于 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;
}
发布于 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>
https://stackoverflow.com/questions/10372369
复制相似问题