如果你只是想让表格自动布局

不使用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文本的颜色为透明

我们做完了!

如果你只是想让表格自动布局

不使用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文本的颜色为透明

我们做完了!

为什么会发生这种情况?

似乎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>

如果你不想设置固定宽度

下面的解决方案允许您拥有较长的表单元格内容，但不能影响父表的宽度，也不能影响父行的高度。例如，你想要一个宽度为: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>

如果你指定table-layout: fixed;在table元素上，那么td的样式应该生效。不过，这也会影响细胞的大小。

Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting