我想在表格单元格中使用CSS文本溢出，这样，如果文本太长而不能适合一行，它将用省略号剪辑，而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展，将表的总宽度推到容器的宽度之外。但是，如果没有它，当文本到达单元格边缘时，它将继续换行为多行。
当前回答
指定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
为清洁自动大小表与省略号
如果你可以抛弃表格标签，那么现代CSS有一个更干净(IMO)的解决方案:使用网格布局。
你只需要一个div或类似的东西来表示表格，里面有单元格，例如:
<div class="table">
<div class="cell">text</div>
<div class="cell">text</div>
<div class="cell">text</div>
<div class="cell">text</div>
</div>
现在，如果我想让它成为一个2x2的表格，那么它只是一个简单的例子，为网格定义两个自动大小的列:
.table {
display: grid;
grid-template-columns: auto auto;
}
对于单元格，你只需要多写几行CSS:
.cell {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
完成工作!如果你需要确保一些列比其他列宽，那么使用fr单元或其他可用选项的列模板效果很好。
.table { 显示:网格; Grid-template-columns: auto auto; ｝ .cell { 文本溢出:省略; 溢出:隐藏; 空白:nowrap;} 边框:1px纯黑色; ｝ < div class = "表" > <div class="cell">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long < div class = "单元格" >文本< / div > < div class = "单元格" >文本< / div > < div class = "单元格" >文本< / div > < / 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>
为什么会发生这种情况?
似乎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>
为了在文本溢出表格单元格时剪切带有省略号的文本，您需要在每个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]-->
