弗雷德会面。他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有改变大小的奇怪习惯,所以他学会了隐藏一些他的内容,这样就不会把其他所有的单元都挤过去,把惠特福德夫人的客厅挤到被遗忘的地方:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这种方法很有效,但弗雷德有一种挥之不去的感觉,如果他的右细胞(他昵称为Celldito)让出一点空间,他的左细胞就不会经常被截断。你能挽救他的理智吗?


总之:表的单元格如何才能均匀溢出,并且只有在它们都放弃了所有空白的情况下才能溢出?


当前回答

几天前我也遇到了同样的挑战。看来路西法·萨姆找到了最好的解决办法。

但我注意到你应该在spacer元素复制内容。认为它不是那么糟糕,但我也想应用标题弹出剪切文本。这意味着长文本将在我的代码中出现第三次。

在这里,我建议在伪元素之后访问title属性以生成间隔并保持HTML干净。

适用于IE8+, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>
.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

其他回答

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

<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>

你懂的。

使用一些css hack,似乎显示:table-column;可以来拯救:

.myTable { display: table; width: 100%; } .myTable:before { display: table-column; width: 100%; content: ''; } .flexibleCell { display: table-cell; max-width: 1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .staticCell { white-space: nowrap; } <div class="myTable"> <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div> <div class="staticCell">Less content</div> </div>

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

我相信我有一个非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;
}

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

不过,flexbox似乎能帮上忙

<table style="table-layout: fixed; max-width: 100%;">
    <tr>
        <td>
             <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">This cells has more content</div>
        </td>
        <td>Less content here</td>
    </tr>
</table>