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

<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)让出一点空间,他的左细胞就不会经常被截断。你能挽救他的理智吗?


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


当前回答

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

不过,flexbox似乎能帮上忙

其他回答

就像samplebias答案一样,如果Javascript是一个可接受的答案,我专门为此目的做了一个jQuery插件:https://github.com/marcogrcr/jquery-tableoverflow

要使用插件,只需输入

$('selector').tableoverflow();

完整示例:http://jsfiddle.net/Cw7TD/3/embedded/result/

编辑:

修复了jsfiddle的IE兼容性问题。 修复jsfiddle中更好的浏览器兼容性(Chrome, Firefox, IE8+)。

Yep I would say thirtydot has it, there is no way to do it unless you use a js method. You are talking about a complex set of rendering conditions that you will have to define. e.g. what happens when both cells are getting too big for their apartments you will have to decide who has priority or simply just give them a percentage of the area and if they are overfull they will both take up that area and only if one has whitespace will you stretch your legs in the other cell, either way there is no way to do it with css. Although there are some pretty funky things people do with css that I have not thought of. I really doubt you can do this though.

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

不过,flexbox似乎能帮上忙

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

问题在于“table-layout:fixed”,它会创建间距均匀、宽度固定的列。但是禁用这个css属性将杀死文本溢出,因为表将变得尽可能大(并且没有任何东西可以溢出)。

我很抱歉,但在这种情况下,弗雷德不能鱼与熊掌兼得。除非房东一开始就给塞尔迪托更少的工作空间,否则弗雷德就不能使用他的…