title: hide css3 multiline ellipsis read more link when there is no use
body: <p>I have a little problem. i figured out a way to use crossbrowser multiline ellipsis.
  Here is my less css mixin. As you can see, this version works perfect in webkit and "ok" in all ohter browsers.</p>
  
  <pre><code>.ellipsis-multi(@lh, @l, @mw) {
    /* non-webkit */
    max-height: @lh*@l;
    /* webkit */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @l;
    display: -webkit-box;
    line-height: @lh;
    max-width: @mw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .excerpt {      
    &amp;.hide {
      .ellipsis-multi(1.4em, 3, 100%)
    }
  }
  </code></pre>
  
  <p>My problem is, i use a read-more link to add and remove the class "hide". This works perfect, but the link is also visible if the excerpt div only has 2 lines of text. I need a way to just show the link if the ellipsis is needed.</p>
  
  <p>Here is a codepen exapmple
  <a href="http://codepen.io/janwagner/pen/ubHef" rel="nofollow">http://codepen.io/janwagner/pen/ubHef</a></p>
  
  <p>I would prefer a css only way to fix this :)</p>
  
  <p>THX a lot!!!</p>