这并不是一个真正干净的解决方案，但它不使用JS，并且在我测试过的每一个浏览器中都能工作。
我的解决方案是将单元格的内容 Package 在一个包含table-layout: fixed和width: 100%的表中。
参见demo。
以下是完整的解决方案：

<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将它们保持在同一行中。根据用例，您可能更喜欢应用min-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上设置一个max-width。
根据@Fabrício Matte的回复，
http://jsfiddle.net/V83Ae/89/

<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.
我在不止一个棘手的情况下尝试过，它对所有人都有效。
我会试着用我的例子贴一个文件，但这应该会帮助你去。

/* 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;

Here you go

<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/
不过会把它留在这里，因为在某些情况下它会为我们做些什么。
[/update]
我们的项目中有这样的CSS，给予看：

.nowr
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}