html - 表溢出父元素

Question

在此页面的顶部，有一个 HTML 表格，其中显示了有关节日的摘要信息。表格的一行显示了节日网站的 URL。如果浏览器很窄（例如在手机上）并且 URL 很长，这会导致表溢出它的父级，如下所示：

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

overflow: hidden;

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

word-wrap: break-word;

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

Answer 1

放

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

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

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

让链接断线。

Answer 2

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