title: Multiple lines in a box which have ellipsis and vertical-align middle
body: <p>I have containers which have dynamic content and multiple lines of text. I want to show ellipsis (...) if the text does not fit into the container. Also it should be vertically aligned middle.</p>
  
  <p>I created a Codepen <a href="http://codepen.io/anon/pen/ewnxG">http://codepen.io/anon/pen/ewnxG</a> with this HTML:</p>
  
  <pre><code>&lt;div class="vertically-centered"&gt;vertically centered with&lt;/div&gt;
  &lt;div class="vertically-centered"&gt;vertically centered with hello&lt;/div&gt;
  &lt;div class="vertically-centered"&gt;one line&lt;/div&gt;
  </code></pre>
  
  <p>and this CSS:</p>
  
  <pre><code>.vertically-centered {
    border: 1px solid red;
    height: 6rem;
    overflow: hidden;
    font-weight: bold;
    font-size: 2.5rem;
    text-overflow: ellipsis;
    width: 300px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .vertically-centered:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  </code></pre>
  
  <p>In IE11 and Firefox the ellipsis "..." are missing, that is okay to me. In Safari and Chrome it works.</p>
  
  <p>You see, that the first <code>div</code> does not work, the text is cut off. The second and third <code>div</code> works. So my solution is dependent on the text length. How can I solve this problem without using JavaScript?</p>