不知道这是否对任何人都有帮助，但我通过为每列指定特定的宽度大小来解决类似的问题。显然，如果每个列的内容宽度变化不太大，那么效果最好。

有一个更简单、更优雅的解决方案。

在你想要应用截断的表格单元格中，只需包含一个带有css table-layout: fixed的容器div。这个容器获取父表单元格的全部宽度，因此它甚至可以响应。

确保对表中的元素应用截断。

工作在IE8+

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

和css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

这是一个工作提琴 https://jsfiddle.net/d0xhz8tb/

简单地添加以下规则到你的td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

例子:

表 { 宽度： 100% } 道明 { 空白：无换行; } .td-truncate { 溢出：隐藏; 文本溢出：省略号; 宽度： 100%; 最大宽度： 0; } <表边框=“1”> <tr> <td>内容</td> <td class=“td-truncate”>long contenttttttttt ttt</td> <td>其他内容</td> </tr> </table>

PS: 如果你想将一个自定义宽度设置为另一个td，使用属性min-width。

这个问题在谷歌的顶部弹出，所以在我的例子中，我使用了css代码片段 从https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/，但应用到td没有给出预期的结果。

我不得不在td的文本周围添加一个div标签，省略号终于起作用了。

简写HTML代码;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

缩写CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

我有同样的问题，但我需要显示多行(其中text-overflow:省略号;失败)。我解决它使用一个TD内的文本区域，然后样式它的行为像一个表格单元格。

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

你可以设置右边单元格的宽度为所需宽度的最小值，然后应用overflow-hidden+text-overflow到左边单元格的内部，但是Firefox在这里有bug…

不过，flexbox似乎能帮上忙