为什么CSS省略号在表格单元格中不起作用？

• Z时代
• 2024-01-10
• 分类：问答

请考虑以下示例：

$(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，并且省略号不出现。

我在这里想念什么？

回答：

显然，添加：

td {
  display: block; /* or inline-block */
}

也解决了这个问题。

另一种可能的解决方案是table-layout:fixed;为表格设置，也将其设置为width。

以上是 为什么CSS省略号在表格单元格中不起作用？ 的全部内容， 来源链接： utcz.com/qa/408328.html