title: Add three dots in a multiline span
body: <p>I found <a href="https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow">this question here on SO</a> and the solution is pretty simple:</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/Y5vpb/" rel="noreferrer">http://jsfiddle.net/Y5vpb/</a></p>
  
  <p>html:  </p>
  
  <pre><code>&lt;span&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look&lt;/span&gt;​
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>span{
      display:inline-block;
      width:180px;
      white-space: nowrap;
      overflow:hidden !important;
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>And it works like expected, it prints: <code>Lorem Ipsum is simply du...</code></p>
  
  <p>Now, the same thing I would like to, but keep failing, create on the following example:  </p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/9HRQq/" rel="noreferrer">http://jsfiddle.net/9HRQq/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="textContainer"&gt;                
      &lt;img src="#" class="image" alt="the_image"&gt;
      &lt;span class="text"&gt;"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.textContainer{
      width: 430px;
      float: left;
      margin-top: 10px;
      border: 1px solid black;                
  }
  
  .text {
      font-size: 24px;
      line-height: 24px;
      font-weight: bold;
      color: #047F04;
      display: block;
      white-space: normal;
      overflow: hidden !important;
      text-overflow: ellipsis;
      height: 99px;
  }
  
  .image {
      float: right;
      position: absolute;
      top: 85px;
      right: 10px;
      width: 108px;
      height: 42px;
  }
  </code></pre>
  
  <p>Can you please tell me how could I achieve to put <code>...</code> on the end of the string in my example?</p>