Question

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

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

此jsfiddle是我迄今为止所管理的内容。 previous question收到了an answer我认为是一个解决方案，但是这似乎不适用于％widths。我正在寻找一个CSS解决方案，然后再使用JavaScript。

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

非常感谢，

Thomas Nadin

Answer 1

你必须简单地改变

 table {
     width: 100%;
 }

到

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

一切都会按预期的那样发挥作用。（见this jsfiddle）

所有神奇之处在于table-layout:fixed;属性，该属性定义表格完全与您定义的一样宽。

除了IE / Mac（https://developer.mozilla.org/en/CSS/table-layout）之外，

table-layout:fixed;得到了很好的支持。

修改

我刚刚再次阅读了这个问题，并发现你要放弃内部<div>。使用此解决方案，可以删除它并将类overflow应用于td.second（因此您可以灵活地将其应用于多个列，如果您愿意的话）。 See the result in this fiddle

Answer 2

首先，请注意几点：

“第三个”在HTML中拼写错误。

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

我意识到这是出于测试目的，但overflow应为.overflow。

.second overflow {
    width: 50px;
}

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

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

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

2 个答案: