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

问题描述

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

library(data.table)
melt(setDT(df),id.var = c("Datetime"),names_to = 'co2')[,depth :=  sub(".*_(\\d+).*","\\1",variable)][]

似乎对文本溢出的任何使用：省略号都需要一个固定宽度的表，也许还有固定宽度的列。这很不幸，因为列将不再调整其宽度以自动适应内容。

我不局限于使用+-------------+------------+------+ |some content | short text | more | +-------------+------------+------+ +-------------+------------------------------------------------+------+ |some content | much longer text that forces the table wide... | more | +-------------+------------------------------------------------+------+ 。我也尝试使用Bootstrap的<table>来做到这一点。 col-auto会根据内容调整列的宽度，但是像col-auto一样，当表太宽时，它会拒绝截断文本。

这有可能吗？

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

解决方法

有一种无需设置'long'表单元格的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或（分数）倍数（例如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>