css - 空白 : nowrap and overflow:hidden within table cell

Question

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

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

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

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

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

更新:

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

Answer 1

它正在扩展，因为宽度设置为其父级(文档正文)的 100%。所以 table 会扩大以适应它的 child 。要么将表格放在具有固定宽度的 div 中，要么固定表格的宽度。