在表格单元格溢出？
我想在表格单元格中使用CSS text-overflow ，例如，如果文本太长而无法放在一行上，它会使用省略号剪辑，而不是包装成多行。 这可能吗？
我试过这个：
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.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
历史：对于IE 9（或更低版本），您需要在HTML中使用此功能，以解决IE特定的呈现问题
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
为什么会发生？
看起来w3.org上的这一部分表明，文本溢出仅适用于块元素：
11.1. Overflow Ellipsis: the ‘text-overflow’ property
text-overflow clip | ellipsis | <string>
Initial: clip
APPLIES TO: BLOCK CONTAINERS <<<<
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
MDN也这样说。
这个jsfiddle有你的代码（有几个调试修改），如果它应用于div而不是td ，它可以正常工作。 它还有我能够快速想到的唯一解决方法，方法是将td的内容包含在一个包含div块中。 然而，这看起来像“丑陋”的标记，所以我希望别人有更好的解决方案。 测试它的代码如下所示：
td, div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid red;
width: 80px;
}Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>
Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table> 指定max-width或固定宽度不适用于所有情况，并且该表格应该是流畅的，并自动将其单元格空间化。 这就是表格的用途。
使用这个：http://jsfiddle.net/maruxa1j/
适用于IE9和其他浏览器。
链接地址: http://www.djcxy.com/p/63027.html