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

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 演示

标签： htmlcss

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
}

或者只需添加最大宽度

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

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

<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">
      <div>

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

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