如何解决如何截断表格列中的文本?
我正在尝试创建一个表格,其中每个列都适合内容的宽度(就像普通表格一样),但是当内容将表格推到容器宽度的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。