我解决这个问题使用单元格内的绝对定位div(相对)。

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

就是这样。然后你可以添加一个top:值到div或垂直居中:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

为了在右侧获得一些空间，您可以减少max-width一点。

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

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

我们做完了!

这个版本可以在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>

如果你指定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>