文本溢出：省略号在表中不起作用

Question

我有两个 HTML 元素 - 一个是div另一个是table. 它们都有两个元素 - div hasp和 table has td。两人的风格相同。

代码：

.container {
  display: flex;
  flex-direction: row;
}

p, td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container" style="width:100px; background-color: red">
  <p width="50px">
    Hello world
  </p>
  <p width="50px">
    Hello world
  </p>
</div>

<table style="background-color: green">
  <tr width="100px">
    <td width="50px">Hello World</td>
    <td width="50px">Hello World</td>
  </tr>
</table>

他们的父母有100px宽度。实际上，我希望它们在大小溢出时被截断。对于div，我得到了所需的输出，但在table，我没有得到相同的结果。为什么会发生这种情况？是因为table有不同的默认样式吗div？

jsFiddle 演示

Answer 1

这是因为表中的显示属性而发生的。您需要给出 adisplay: block才能使省略号起作用，但这有点消除了表格的工作方式。

更好的办法是将你的td内容包装在 a 中div 并更改你的 CSS。

选项 2 将使用max-width to your td`。

<td width="50px">
  <div>Hello World</div>
</td>

CSS 至：

td>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px
}

或者只需添加最大宽度

<td width="50px">
  <div>Hello World</div>
</td>

td>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px
}