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

【问题标题】：How to use ellipsis in a table cell?如何在表格单元格中使用省略号？
【发布时间】：2019-04-28 16:18:19
【问题描述】：

<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;

【问题讨论】：

你的意思是“如何省略表格单元格中的文本”？也许您应该查看text-overflow: ellipsis; 属性
在表格单元格中是。

标签： html css html-table flexbox ellipsis

【解决方案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

【讨论】：