我想在表格单元格中使用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文本的颜色为透明
我们做完了!
