我想在表格单元格中使用CSS文本溢出，这样，如果文本太长而不能适合一行，它将用省略号剪辑，而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展，将表的总宽度推到容器的宽度之外。但是，如果没有它，当文本到达单元格边缘时，它将继续换行为多行。
当前回答
在伸缩块中包装单元格内容。作为奖励，单元格自动匹配可见宽度。
table { width: 100%; } div.parent { display: flex; } div.child { flex: 1; width: 1px; overflow-x: hidden; text-overflow: ellipsis; } <table> <tr> <td> <div class="parent"> <div class="child"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div> <div> </td> </tr> </table>
其他回答
为什么会发生这种情况?
似乎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，或百分比列宽度，或表布局:固定等。
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文本的颜色为透明
我们做完了!
当它以表格宽度百分比为单位时，或者你不能在表格单元格上设置固定宽度。你可以应用table-layout: fixed;让它起作用。
table { table-layout: fixed; width: 100%; } td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: 1px solid red; } <table> <tr> <td>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.</td> <td>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.</td> </tr> </table>
这个版本可以在IE 9中运行。
http://jsfiddle.net/s27gf2n8/
<div style="display:table; table-layout: fixed; width:100%; " >
<div style="display:table-row;">
<div style="display:table-cell;">
<table style="width: 100%; table-layout: fixed;">
<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</table>
</div>
<div style="display:table-cell;">
Top right Cell.
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<table style="width: 100%; table-layout: fixed;">
<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</table>
</div>
<div style="display:table-cell;">
Bottom right cell.
</div>
</div>
</div>
指定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>
