我想在表格单元格中使用CSS文本溢出,这样,如果文本太长而不能适合一行,它将用省略号剪辑,而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展,将表的总宽度推到容器的宽度之外。但是,如果没有它,当文本到达单元格边缘时,它将继续换行为多行。
我想在表格单元格中使用CSS文本溢出,这样,如果文本太长而不能适合一行,它将用省略号剪辑,而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展,将表的总宽度推到容器的宽度之外。但是,如果没有它,当文本到达单元格边缘时,它将继续换行为多行。
当前回答
为了在文本溢出表格单元格时剪切带有省略号的文本,您需要在每个td类上设置max-width CSS属性以使溢出工作。不需要额外的布局div元素:
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于响应式布局;使用max-width CSS属性来指定列的有效最小宽度,或者只使用max-width: 0;无限的灵活性。同样,包含的表需要特定的宽度,通常为width: 100%;,列的宽度通常设置为总宽度的百分比
table {width: 100%;}
td
{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}
历史:对于ie9(或更少),你需要在你的HTML中有这个,以修复特定于IE的渲染问题
<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->
其他回答
这对我很管用
table {
width: 100%;
table-layout: fixed;
}
td {
text-overflow: ellipsis;
white-space: nowrap;
}
我解决这个问题使用单元格内的绝对定位div(相对)。
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
就是这样。然后你可以添加一个top:值到div或垂直居中:
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
为了在右侧获得一些空间,您可以减少max-width一点。
如果你指定table-layout: fixed;在table元素上,那么td的样式应该生效。不过,这也会影响细胞的大小。
Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting
在我的情况下,这是有效的,在Firefox和Chrome:
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
如果你只是想让表格自动布局
不使用max-width,或百分比列宽度,或表布局:固定等。
https://jsfiddle.net/tturadqq/
工作原理:
步骤1:让表自动布局完成它的工作。
当有一个或多个列有很多文本时,它会尽可能地缩小其他列,然后将长列的文本换行:
步骤2:将单元格内容包装在一个div中,然后将该div设置为max-height: 1.1em
(额外的0.1em用于显示在文本底部下方的字符,如'g'和'y'的尾部)
步骤3:在divs上设置标题
这对可访问性有好处,并且对于我们稍后使用的小技巧是必要的。
第四步:在div上添加CSS::after
这是一个棘手的问题。我们使用content: attr(title)设置CSS::after,然后将其放置在div的顶部,并设置text-overflow: ellipsis。我把它涂成红色,让它更清楚。
(注意长列现在有一个尾省略号)
步骤5:设置div文本的颜色为透明
我们做完了!