如何在表格单元格中使用省略号？

Question

<div className="container">
  <div className="left-area">
    <div className="container2">
      <table>
        <tbody>
          <tr>
            <td>
              48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
            </td>
            <td>1/1/0001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我想要截取这段非常长的文本。

.container {
  margin-top: 20px;
  width: 90%;
  display: flex;
  .left-area {
    flex: 1 1 20%;
    .container2 {
      flex: 1 1 20%;
      table {
        width: 100%;
      }
    }
  }
}

我尝试在 td cell 上使用这个css

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

- chobo2

---

你是指“如何在表格单元格中使用省略号显示文本”吗？也许你应该查看text-overflow: ellipsis;属性。 - zgood

表格单元格中的是“是”。 - chobo2

Answer 1

缺失的关键在于 table-layout: fixed。

table {
  width: 100%;
  table-layout: fixed;
}

td {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td>
        48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
      </td>
      <td>1/1/0001</td>
    </tr>
  </tbody>
</table>

默认情况下，使用table-layout: auto，浏览器使用自动布局算法来检查内容大小以设置单元格（因此为表格列）的宽度。在这种情况下，width和overflow属性被忽略，无法使用省略号。

使用table-layout: fixed，您可以在第一行中定义单元格的宽度（从而设置表格的列宽）。在这种情况下，width和overflow属性会被考虑，从而允许使用省略号函数。

更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

- Michael Benjamin

---

我进行了测试，确实，省略号只能与 fixed 一起使用，但这不是普通的 <table>，而是由 Javascript 网格小部件库生成的表格，因此设置 fixed 会导致库出现故障。我不明白为什么省略号在适应大小时逻辑上不能工作。我的意思是，在自动调整大小时，当文本很长（不像 OP 那样无法打破的字符串）时，它会被分成多行进行换行。浏览器不能简单地显示第一行并用省略号隐藏其他行吗？ - Damn Vegetables