空白：nowrap 和溢出：隐藏在表格单元格中

Posted 2023-03-05

【中文标题】空白：nowrap 和溢出：隐藏在表格单元格中

【英文标题】：white-space: nowrap and overflow:hidden within table cell

【发布时间】：2013-01-26 07:24:51

【问题描述】：

我正在制作日历。我有一张桌子，每个<td> 是一天。我想在单元格中显示当天的事件列表。我希望每个事件都显示为两行文本，如果文本长于水平空间，则应该隐藏文本。

我有一个可变宽度的表格（它在我的 CSS 的其他地方设置为其父级的 width: 100%;）。

这是我的 jsFiddle：http://jsfiddle.net/fZGyz/1/

您可以看到的问题是，尽管width: 100%; 和overflow: hidden; 被显式设置，.eventSummary 和.eventLocation 的文本正在强制表格展开，这不是我想要的。

这是 CSS 中那些“目前不可能”的问题之一吗？

更新：

我可以用table-layout: fixed; 破解它，并在<td> 上设置overflow: hidden;... 现在就可以了（因为没有省略号，<li> 上的任何右边框都将被隐藏，所以原来的问题仍然存在。

【参考方案1】：

它正在扩展，因为宽度设置为其父级（即文档的正文）的 100%。因此，表格会扩展以适合其子项。要么把表格放在一个固定宽度的 div 中，要么固定表格的宽度。

【参考方案2】：

你所有的价值观都是相对的，这带来了扩展。尝试为.eventSummary 和.eventLocation 设置所需的最大宽度，不要忘记为它们设置 display: block。