表格单元格中的CSS文本溢出？
我想在表格单元格中使用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和其他浏览器。
看来如果你指定table-layout: fixed; 在table元素上，那么你的td样式应该生效。 不过，这也会影响细胞的大小。
Sitepoint在这里讨论一下表格布局方法： http : //reference.sitepoint.com/css/tableformatting
如果你不想固定宽度的东西
下面的解决方案允许您有很长的表格单元格内容，但不得影响父表格的宽度，也不会影响父行的高度。 例如，如果要使用width:100%的表格，仍然将自动调整大小功能应用于所有其他单元格。 在“注释”或“评论”栏的数据网格中很有用。
将这3个规则添加到您的CSS：
.text-overflow-dynamic-container { position: relative; max-width: 100%; padding: 0 !important; display: -webkit-flex; display: -moz-flex; display: flex; vertical-align: text-bottom !important; } .text-overflow-dynamic-ellipsis { position: absolute; white-space: nowrap; overflow-y: visible; overflow-x: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; max-width: 100%; min-width: 0; width:100%; top: 0; left: 0; } .text-overflow-dynamic-container:after, .text-overflow-dynamic-ellipsis:after { content: '-'; display: inline; visibility: hidden; width: 0; }
在需要动态文本溢出的任何表格单元格中像这样格式化HTML：
<td> <span class="text-overflow-dynamic-container"> <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability..."> //...your long text here... </span> </span> </td>
另外将所需的min-width （或根本不应用）应用于表格单元格。
当然小提琴： https ： //jsfiddle.net/9wycg99v/23/
当它在百分比表格宽度中，或者不能在表格单元格上设置固定宽度时。 您可以应用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>
如果你只是想要表格自动布局
不使用max-width ，百分比列宽或table-layout: fixed等
https://jsfiddle.net/tturadqq/
怎么运行的：
第1步：让表格自动布局做它的事情。
当有一个或多个文本列很多时，它会尽可能地缩小其他列，然后包装长列的文本：
第2步：将单元格内容包装在div中，然后将该div设置为max-height: 1.1em
（额外的0.1em用于在文本底下呈现的字符，比如'g'和'y'的尾部）
第3步：在div上设置title
这对于可访问性是很好的，对于我们稍后使用的小技巧来说是必要的。
第四步：在div上添加一个CSS ::after
这是棘手的一点。 我们设置一个CSS ::after ， content: attr(title) ，然后将其放在div的顶部，并设置text-overflow: ellipsis 。 我在这里把它涂成红色，以表示清楚。
（请注意长列现在有一个尾巴的省略号）
第5步：将div文本的颜色设置为transparent
我们完成了！
将单元格内容放入一个弹性块中。 作为奖励，单元格自动适合可见宽度。
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>
这是在IE 9中工作的版本。
<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>
