如何截断 table 列中的文本？

Question

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

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

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

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

我不依赖于使用 <table>。我还尝试使用 Bootstrap 的 col-auto 来做到这一点。 col-auto 根据内容调整列的宽度，但像 <table> 它拒绝在 table 变得太宽时截断文本。

这可能吗？

这里是 fiddle：https://jsfiddle.net/nsf04tce/2/

Answer 1

有一种方法可以在不设置 'long' table 单元格的 width 的情况下实现这一点。

成分如下：

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

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

在此旁边，将 overflow: hidden 添加到长 table 单元格（在您最初添加的内容旁边），以便它知道如果内容溢出该怎么做。

在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，您可以使用带有 span 元素的 div。 .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>

如何截断 table 列中的文本？

How to truncate text in a table column?

css

html-table

ellipsis

twitter-bootstrap