使用百分比宽度时的溢出元素

Question

我试图在 td 中的元素上执行单行溢出，当它的内容超过其父元素的内容时，使用相对宽度。

 ┌─────────────────────────────────────────────────────────────────────┐
 |10%    60%                                       30%                 |
 |Left   Middle (This content should not exceed... Right               |
 |                                                                     |

这个jsfiddle 是我迄今为止所管理的。 previous question 收到 an answer 我认为这是一个解决方案，但它似乎不适用于 % 宽度。在求助于 JavaScript 解决方法之前，我正在寻找一个 CSS 解决方案。

注意：我不需要内部元素，如果 CSS 样式可以直接应用于外部元素，那也很棒。

非常感谢，

托马斯·纳丁

Answer 1

你必须简单地改变

 table {
     width: 100%;
 }

到

 table {
     width: 100%;
     table-layout:fixed;
 }

一切都会如您所愿。 （见this jsfiddle）

所有的魔力都在于table-layout:fixed; 属性，它定义了表格应该完全与您定义的一样宽。

table-layout:fixed; 得到很好的支持，除了 IE/Mac (https://developer.mozilla.org/en/CSS/table-layout)。

编辑

我刚刚又看了一遍问题，看到你想删除内部<div>。使用此解决方案，只需将其删除并将overflow 类应用于td.second（因此您很灵活，如果您愿意，也可以将其应用于多个列）。 See the result in this fiddle.

Answer 2

首先，几点说明：

“third”在 HTML 中拼写错误。

<td class="thrid">Right</td>

我知道这是出于测试目的，但 overflow 应该是 .overflow。

.second overflow {
    width: 50px;
}

当我删除 white-space: nowrap; 时，它在 WebKit 中完美运行。你在测试什么浏览器？

.overflow {
    overflow: hidden;
    text-overflow: ellipsis;
}