表格单元格中的CSS文本溢出？
我想text-overflow在表格单元格中使用CSS ，这样，如果文本太长而无法放在一行上，它将用省略号进行剪切，而不是换成多行。这可能吗？
我尝试了这个：
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是，white-space: nowrap似乎使文本（及其单元格）不断向右扩展，从而使表格的总宽度超出了其容器的宽度。但是，如果没有它，文本在碰到单元格的边缘时会继续换行。
第2048篇《表格单元格中的CSS文本溢出？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
将单元格内容包装在flex块中。另外，单元格自动适合可见宽度。
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>如果是百分比表格宽度，或者无法在表格单元格上设置固定宽度。您可以申请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>看来，如果您table-layout: fixed;在table元素上指定，则您的样式td应会生效。但是，这也将影响单元的大小。
Sitepoint在此处讨论了表布局方法：http : //reference.sitepoint.com/css/tableformatting
Why does this happen?
It seems this section on w3.org suggests that text-overflow applies only to block elements:
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
The MDN says the same.
该jsfiddle具有您的代码（进行了一些调试修改），如果将其应用于a 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在每个td类上设置CSS属性，以使溢出起作用。不需要额外的布局div
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
For responsive layouts; use the max-width CSS property to specify the effective minimum width of the column, or just use max-width: 0; for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;, and the columns will typically have their width set as percentage of the total width
table {
width: 100%;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
相似问题
问题类别
我使用绝对定位的div（相对）来解决此问题。
而已。然后，您可以在div中添加top：值或将其垂直居中：
要在右侧留出一些空间，可以稍微减小最大宽度。