我有同样的问题，但我需要显示多行(其中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;
        }
    }

这个问题在谷歌的顶部弹出，所以在我的例子中，我使用了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; }

假定“表布局:固定”是基本的布局要求，这将创建均匀间隔的不可调整列，但您需要使单元格的百分比宽度不同，也许设置单元格的“colspan”为倍数?

例如，为了方便百分比计算，使用总宽度为100，并且假设您需要一个单元格为80%，另一个单元格为20%，考虑:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

当然，对于80%和20%的列，您可以将100%宽度的单元格colspan设置为5,80%宽度的单元格colspan设置为4,20%宽度的单元格colspan设置为1。

我相信我有一个非javascript的解决方案!我不想满足于JavaScript的修复，因为我发现页面加载后东西移动的轻微抖动是不可接受的。

特点:

没有JavaScript 没有固定布局 没有加权或百分比宽度技巧 适用于任意数量的列 简单的服务器端生成和客户端更新(不需要计算) 跨浏览器兼容的

How it works: Inside the table cell place two copies of the content in two different elements within a relatively-positioned container element. The spacer element is statically-positioned and as such will affect the width of the table cells. By allowing the contents of the spacer cell to wrap we can get the "best-fit" width of the table cells that we are looking for. This also allows us to use the absolutely-positioned element to restrict the width of the visible content to that of the relatively-positioned parent.

测试和工作在:IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

结果图片:

JSFiddle: http://jsfiddle.net/zAeA2/

示例HTML / CSS:

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

你可以试着“加权”某些列，像这样:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

您还可以尝试一些更有趣的调整，如使用0%宽度的列和使用一些组合的白色空间CSS属性。

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

你懂的。

我有同样的问题，但我需要显示多行(其中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;
        }
    }