如何截断表格列中的文本？

Question

我正在尝试创建一个表格，其中每一列都适合内容的宽度（就像普通表格一样），但是当内容将表格推到超过容器宽度的 100% 时，某些长列将被截断省略号。

+-------------+------------+------+
|some content | short text | more |
+-------------+------------+------+

+-------------+------------------------------------------------+------+
|some content | much longer text that forces the table wide... | more |
+-------------+------------------------------------------------+------+

似乎任何使用 text-overflow: ellipsis 都需要一个固定宽度的表格，也许还有固定宽度的列。这很不幸，因为列将不再自动调整其宽度以适应内容。

我不喜欢使用<table>。我也尝试过使用 Bootstrap 的col-auto 来做到这一点。 col-auto 会根据内容调整列的宽度，但与 <table> 一样，它拒绝在表格太宽时截断文本。

这可能吗？

这是一个小提琴：https://jsfiddle.net/nsf04tce/2/

Answer 1

有一种方法可以在不设置“长”表格单元格的width 的情况下实现此目的。

成分如下：

将border-collapse: collapse 和table-layout: fixed 添加到table 类并给出width 而不是max-width。

• border-collapse: collapse 将为所有单元格提供一个共享边框。
• table-layout: fixed 设置固定宽度。
• 使用width 设置固定宽度而不是max-width（可以增长到...）。

在此旁边，将overflow: hidden 添加到长表格单元格（在您所做的初始添加旁边），这样它就知道如果内容溢出该怎么办。

在 CSS 中：

.mytable {
    border-collapse: collapse;
    width: 400px;
    table-layout: fixed;
}

.long-td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

演示：

td {
  border: 1px solid;
}

.mytable {
  border-collapse: collapse;
  width: 400px;
  table-layout: fixed;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<table class="mytable">
  <tr>
    <td>short</td>
    <td class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long </td>
    <td>short</td>
  </tr>
</table>

编辑

如果您不必使用table，您可以使用div 和内部的span 元素。 .mytable div 得到 display: flex 和 flex-flow: row nowrap 以确保它延伸。

CSS：

.mytable {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}

span {
  border: 1px solid;
}

.mytable {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<div class="mytable">
  <span>short</span>
  <span class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long </span>
  <span>short</span>
</div>

编辑 2

如果您可以使用display: grid，您可以指定中间列为auto 或（fr）agment 的乘数的网格，例如4fr。您可以将第一列和最后一列设置为指定的宽度。 grid-template-columns、see the documentation on MDN有很多选择。

.mytable {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

div > div {
  border: 1px solid;
}

.mytable {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<div class="mytable">
  <div>short</div>
  <div class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long</div>
  <div>shorter story</div>
    <div>short</div>
  <div class="long-td">Suspendisse cursus ornare rutrum. Pellentesque sollicitudin bibendum odio, vitae euismod ligula.</div>
  <div>shorter story</div>
</div>