我想在表格单元格中使用CSS文本溢出，这样，如果文本太长而不能适合一行，它将用省略号剪辑，而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展，将表的总宽度推到容器的宽度之外。但是，如果没有它，当文本到达单元格边缘时，它将继续换行为多行。
当前回答
如果你指定table-layout: fixed;在table元素上，那么td的样式应该生效。不过，这也会影响细胞的大小。
Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting
其他回答
指定max-width或固定宽度并不适用于所有情况，表应该是流动的，并自动为单元格设置空间。这就是桌子的作用。适用于IE9和其他浏览器。
使用这个:http://jsfiddle.net/maruxa1j/
table { width: 100%; } .first { width: 50%; } .ellipsis { position: relative; } .ellipsis:before { content: ' '; visibility: hidden; } .ellipsis span { position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> </tr> </tbody> </table>
如果你指定table-layout: fixed;在table元素上，那么td的样式应该生效。不过，这也会影响细胞的大小。
Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting
这对我很管用
table {
width: 100%;
table-layout: fixed;
}
td {
text-overflow: ellipsis;
white-space: nowrap;
}
XML
<td><div>Your overflowing content here.</div></td>
CSS
td div
{
max-height: 30vh;
overflow: auto;
}
为了这个特定的目的而试图打乱整个表是没有意义的。是的，有时候如果你明确不想成为另一个600个div嵌套的Twitter/Facebook“开发者”，添加一个额外的元素是可以的。
在我的情况下，这是有效的，在Firefox和Chrome:
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
