表溢出父元素

Question

在this page的顶部，有一个HTML表格，显示有关节日的摘要信息。该表的一行显示了该节日网站的URL。如果浏览器很窄（例如在移动电话上）并且URL很长，这会导致表格溢出它的父级，如下所示：

理想情况下，如果URL太长而无法在可用空间中显示，我希望URL的可见部分被截断，因此为了实现这一点，我添加了：

overflow: hidden;

到相关的表格单元格，但这不起作用。然后我尝试使用规则

使URL包裹超过2行

word-wrap: break-word;

但这也行不通。当URL很长时，如何防止此表溢出它的父级？

Answer 1

table-layout:fixed应该通过一些调整来解决这个问题。 overflow:hidden无法对单元格本身起作用的原因是因为它实际上并未被截断，因为默认情况下该表会增长以容纳其所有内容 - 哇。那里 没有溢出来隐藏。通过将表的布局策略从默认自动切换为固定，它实际上能够剪切其内容。

Answer 2

集

#overview > table {
    table-layout: fixed;
}

使<table/>尊重width，同时忽略可能的内容溢出和

#overview > table a {
    word-wrap: break-word;
}

让链接断开。