title: Truncating text within a span within a table
body: <p>I have a table setup to truncate text perfectly.... until I wrap the text in that table into a div. See this JSFiddle as an example: <a href="http://jsfiddle.net/3DKMJ/" rel="nofollow noreferrer">http://jsfiddle.net/3DKMJ/</a></p>
  
  <p>This works for truncating the text in the cell:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Text&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This does not work for truncating the text in the cell:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div&gt;Text&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>table {border:1px solid #000; width:100px;table-layout: fixed;}
  td { width:100px;white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
  </code></pre>
  
  <p>The thing about the div is that it still prevents the text from wrapping, and the text is just hidden, but the ellipses that I have set to show don't show with the div attached.</p>
  
  <p>Any ideas how to get this to work when there are div's within the table?</p>
  
  <p>[EDIT] As mentioned, I could add <code>td, td div {</code> to it and that will work. I realized this after posting, my problem seems to be more specific. I actually have a span that is being displayed as an inline block. I assumed it was the block part that was causing problems, but I guess it is the fact that it is a span with an inline block. See this upadted fiddle: <a href="http://jsfiddle.net/P2PZW/2/" rel="nofollow noreferrer">http://jsfiddle.net/P2PZW/2/</a></p>