title: CSS Text-overflow Ellipsis Not Displaying
body: <p>I have a div with some inner content that I need to have an ellipsis when it overflows.  I've done this many times on other elements but for some reason this is not behaving as expected.</p>
  
  <p>Also, I left <code>white-space:nowrap;</code> out on purpose because the content then does not break to the next line within the span, as a result I only see 2-3 words before the ellipsis starts.  I would like the text to span the entire height of the parent container then have the ellipsis start for content that exists beyond those bounds.</p>
  
  <p>Here is a working Demo: <a href="http://jsfiddle.net/sadmicrowave/DhkSA/" rel="noreferrer">http://jsfiddle.net/sadmicrowave/DhkSA/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.flow-element{
       position:absolute;
       font-size:12px;
       text-align:center;
       width:75px;
       height:75px;
       line-height:70px;
       border:1px solid #ccc;
  }
  
  .flow-element .inner{
       position:absolute;
       width:80%;
       height:80%;
       border:1px solid blue;
       top:0px;
       bottom:0px;
       left:0px;
       right:0px;
       margin:auto;
       text-align:center;
  }
  
  .flow-element .long{
       float:left;
       height:50px;
       width:100%;
       line-height:12px;
       border:1px solid red;  
       text-overflow:ellipsis;
       overflow:hidden;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class='flow-element' style='top:100px; left:50px;'&gt;
    &lt;div class='inner'&gt;
       &lt;span class='long'&gt;Box 1 and some other content that should wrap and do some other stuff&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Can someone please help.  I need to display as much text as possible within the red outlined span while having an ellipsis when text content overflows the container...</p>
  
  <p>Thanks in advance</p>