title: white-space: nowrap and overflow:hidden within table cell
body: <p>I'm building a calendar. I have a table where each <code>&lt;td&gt;</code> 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.</p>
  
  <p>I have a table that has a variable width (it's set to <code>width: 100%;</code> of its parent elsewhere in my CSS).</p>
  
  <p>Here's my jsFiddle: <a href="http://jsfiddle.net/fZGyz/1/" rel="noreferrer">http://jsfiddle.net/fZGyz/1/</a></p>
  
  <p>The problem you can see is that despite <code>width: 100%;</code> and <code>overflow: hidden;</code> being explicitly set, the text of <code>.eventSummary</code> and <code>.eventLocation</code> is forcing the table to expand, which is not what I want.</p>
  
  <p>Is this one of those "not currently possible" problems in CSS?</p>
  
  <p>UPDATE:</p>
  
  <p>I can hack it with <code>table-layout: fixed;</code> and setting <code>overflow: hidden;</code> on the <code>&lt;td&gt;</code>... it'll do for now (as there's no ellipsis, and any border-right on the <code>&lt;li&gt;</code> would be hidden, so the original problem still stands.</p>