6

I'm building a calendar. I have a table where each <td> is a day. I want to display a list of events for that day within the cell. I want each event to appear as two lines of text, if the text is longer than there is horizontal space for then the text should be hidden.

I have a table that has a variable width (it's set to width: 100%; of its parent elsewhere in my CSS).

Here's my jsFiddle: http://jsfiddle.net/fZGyz/1/

The problem you can see is that despite width: 100%; and overflow: hidden; being explicitly set, the text of .eventSummary and .eventLocation is forcing the table to expand, which is not what I want.

Is this one of those "not currently possible" problems in CSS?

UPDATE:

I can hack it with table-layout: fixed; and setting overflow: hidden; on the <td>... it'll do for now (as there's no ellipsis, and any border-right on the <li> would be hidden, so the original problem still stands.

4

2 回答 2

0

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

于 2013-02-11T08:04:38.460 回答
0

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

于 2013-02-11T08:13:02.777 回答