title: CSS display: table-cell ignores overflow and width
body: <p>Fiddle: <a href="http://jsfiddle.net/wTtsV/" rel="noreferrer">http://jsfiddle.net/wTtsV/</a></p>
  
  <p>The table cell #t2 does not size correctly:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="table"&gt;
      &lt;div id="t1"&gt;a&lt;/div&gt;
      &lt;div id="t2"&gt;
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      &lt;/div&gt;
      &lt;div id="t3"&gt;a&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      margin: 0;
  }
  #table{
      display: table;
      width: 100%;
  }
  #t1{
      display: table-cell;
      background-color: red;
  }
  #t2{
      display: table-cell;
      background-color: green;
  }
  #t3{
      display: table-cell;
      background-color: blue;
  }
  </code></pre>
  
  <p>Expected result:</p>
  
  <p><img src="https://i.stack.imgur.com/iedoa.png" alt="enter image description here"></p>
  
  <p>How to hide text in <code>#t2</code> when it is too long?</p>