如何在HTML表格中实现省略号？

Question

如何在HTML表格中实现省略号？

3

我有一个HTML页面上的一些表格，其中某些单元格需要限制宽度。任何过长的文本都需要使用省略号(...)截断以显示存在更多的文本。text-overflow: ellipsis对此做得很好！

我的示例看起来像这样：

<html>

<head>
  <title>Test table ellipsis</title>
  <style>
    table th,
    table td {
      border: 1px solid red;
    }
    
    table .col-A {
      width: 25%;
    }
    
    table .col-B {
      width: 75%;
    }
    
    table .col-B div {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <th class="col-A">Column A</th>
      <th class="col-B">Column B</th>
    </thead>
    <tbody>
      <tr>
        <td class="col-A">Value A1</td>
        <td class="col-B">Value B1</td>
      </tr>
      <tr>
        <td class="col-A">Value A2</td>
        <td class="col-B">
          <div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

乍一看这样似乎有效。但是你越看它，它就会越分崩离析：

我指定了列宽为25％和75％。显然不是这种情况。直接更改长文本会影响列宽度
文本被"ellipsized"（用省略号表示），但是还有很多空间。为什么不使用那些自由空间（在下面截图中标记为橙色）？

我真的希望找到一个与表格良好配合的解决方案（因为它所展示的数据确实是表格形式的，而且我有大量现有的CSS假定使用的是表格）。但是此时，我也愿意采用一些div和flexbox的组合来解决问题。

- CameO73

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caramba · Accepted Answer

为什么它不使用屏幕截图中标记为橙色的空闲空间？

因为您在内部的

也具有类col-B，您在css中指定了每个表格内class col-B的元素都将拥有75%的宽度。

table .col-B {
  width: 75%;
}

您可以用多种方式更改它。其中一种解决方法是覆盖 div 的 width，如下所示：

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  width: 75%;
}

table .col-B div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* only added this line */
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
  </tbody>
</table>

明显的另一种方法是从 div 中删除类...

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  width: 75%;
}

table .col-B div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div>Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
  </tbody>
</table>

顺便提一下：表格默认情况下不占据100%的宽度。您可以通过添加以下代码解决该问题：

table {
    width: 100%;
}

但是现在，使用表格的 width: 100%; ，省略号不再起作用了。也许还有其他更好的方法，但我能够使其工作的唯一方法是通过一些定位（这不是最好的解决方案），但它可以工作：

table {
  width: 100%;
}

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  position: relative;
  width: 75%;
}

table .col-B > div {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  left: 1px;
  right: 0;
  top: 0;
  bottom: 0;
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div>Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
    <tr>
      <td class="col-A">Value A3</td>
      <td class="col-B" >
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </td>
    </tr>
  </tbody>
</table>