请考虑以下示例:
$(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,并且省略号不出现。
width = 139
我在这里想念什么?
显然,添加:
td { display: block; /* or inline-block */ }
也解决了这个问题。
另一种可能的解决方案是table-layout:fixed;为表格设置,也将其设置为width。
table-layout:fixed;
width