html - 表溢出父元素

Question

在 this page 的顶部，有一个 HTML 表格显示有关节日的摘要信息。表格的一行显示了节日网站的 URL。如果浏览器很窄(例如在手机上)并且 URL 很长，这会导致表格溢出其父级，如下所示:

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

overflow: hidden;

到相关的表格单元格，但这没有用。然后我尝试使用规则使 URL 换行 2 行

word-wrap: break-word;

但这也没有用。当 URL 很长时，如何防止此表溢出其父表？

Answer 1

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