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

如果你不想设置固定宽度

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

td {
   text-overflow: ellipsis;
   white-space: nowrap;
}

我解决这个问题使用单元格内的绝对定位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一点。

在我的情况下，这是有效的，在Firefox和Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

为清洁自动大小表与省略号

如果你可以抛弃表格标签，那么现代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 >