这并不是一个真正干净的解决方案，但它不使用 JS，并且在我测试过的每个浏览器中都可以使用。
table-layout: fixed我的解决方案包括将单元格的内容用和包裹在表格中width: 100%。
请参阅演示。
这是完整的解决方案：
<table class="main-table">
<tr>
<td class="nowrap">Button 1</td>
<td>
<table class="fixed-table">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
</tr>
</table>
</td>
<td class="nowrap">Button 2</td>
</tr>
</table>
.main-table {
width: 100%;
}
.fixed-table {
/* magic */
width: 100%;
table-layout: fixed;
/*not really necessary, removes extra white space */
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
.fixed-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nowrap {
/* used to keep buttons' text in a single line,
* remove this class to allow natural line-breaking.
*/
white-space: nowrap;
}
目前还不清楚侧边按钮的意图是什么，因此我习惯white-space: nowrap将它们保持在同一行。根据用例，您可能更喜欢应用 amin-width并让它们自然换行。
在表格上设置 100% 宽度并指定fixed表格布局：
table {
width: 100%;
table-layout: fixed;
}
然后，为应该有省略号的表格单元格设置以下内容：
td:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
瞧！带有省略号溢出的响应表！
演示：http: //jsfiddle.net/VyxES/
HTML
<tr>
<td>
<span class="ellipsis"> A very looooooooooooooooooooooooooooooong string</span>
</td>
</tr>
CSS
td {
position: relative;
}
.ellipsis {
/*Here is the trick:*/
position: absolute;
width: 100%;
/*End of the trick*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
一种更简洁的方法是简单地在 td 上设置一个最大宽度。
根据@Fabrício Matté 的回复，
<table class="main-table">
<tr>
<td class="nowrap">Button 1</td>
<td class="truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
<td class="nowrap">Button 2</td>
</tr>
和
body { margin: 0; }
.main-table {
width: 100%;
}
.truncate {
text-overflow: ellipsis;
white-space : nowrap;
overflow : hidden;
max-width : 100px; /* Can be any size, just small enough */
}
.nowrap {
white-space: nowrap;
}
我不知道为什么会这样，但确实如此，所以如果有人能弄清楚为什么应用最大宽度是如何工作的，那么请让我知道，因为我是偶然这样做的。
在敲了几个小时的头后，没有任何解决方案，终于找到了。
您想要作为溢出底部的元素需要一个最小/最大宽度，其中最大值低于最小宽度。然后，您可以溢出元素或其子元素，您可以在其中使用您选择的任何方式设置：%、px、auto。
我在不止一种棘手的情况下尝试过它，它适用于所有情况。
我会尝试用我的例子发布一个fidle，但这应该可以帮助你。
/* Apply on base element for proper overflow */
max-width: 1px;
min-width: 10000px;
/* Apply on self or child, according to need */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<div class="container">
<div>
Button 1
</div>
<div class="fill">
<div class="lockText">
A one-lined text that is too long and has to be...
</div>
</div>
<div>
Button 2
</div>
</div>
诀窍是使用首先占用剩余空间的单元格设置表格布局（css表格，请注意！）。
.container {
display: table;
width: 100%;
}
.container > div {
display: table-cell;
white-space: nowrap;
position : relative;
width : auto;
/*make it easier to see what's going on*/
padding : 2px;
border : 1px solid gray;
}
.container > .fill {
width : 100%;
}
然后添加约束自身的文本。
.lockText {
position : absolute;
left : 0;
right : 0;
overflow: hidden;
text-overflow: ellipsis;
}
[更新]我的道歉，似乎并没有像那样工作：http: //jsfiddle.net/kQKfc/1/
不过会留在这里，因为它在某些情况下对我们有用。
[/更新]
我们的项目中有这个 css，试一试：
.nowr
{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}