如何使文本溢出省略号在表格单元格中工作？

难以捉摸的省略号：揭示表格单元格中的 CSS 挑战

考虑一个简单的场景：您想要在表格单元格中显示长文本，同时限制其宽度至 50 像素。当然，您可以使用 CSS 属性来实现此目的：文本溢出：省略号、空白：nowrap 和设置宽度。然而，令你惊讶的是，省略号却找不到，让你感到困惑。

为了理解这个问题，让我们深入研究 CSS 规范。 text-overflow 属性会影响内联元素，而表格单元格默认情况下不会影响内联元素。要启用省略号，我们需要为表格单元格显式设置 display: block 或 display: inline-block 。这赋予它们类似内联的行为，从而使文本溢出属性生效。

或者，您可以选择另一种方法。通过设置table-layout:fixed;对于表格并指定其宽度，您可以强制宽度在单元格中均匀分布。这还可以有效地在单元格内启用省略号。

以下是使用这些解决方案时代码的外观：

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

或

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

实现这些解决方案中的任何一个都将解决问题，让省略号在表格单元格内按预期工作。

以上是如何使文本溢出省略号在表格单元格中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！