title: CSS Text ellipsis including "More" link
body: <p>So I have the following Fiddle that has set an ellipsis in a text into two lines. Then I want to have a 'More' link inline with the text.</p>
  
  <p><a href="http://jsfiddle.net/csYjC/2876/" rel="noreferrer">http://jsfiddle.net/csYjC/2876/</a></p>
  
  <p>So if our text has more than two lines, it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MFHHw.jpg" alt="enter image description here"></p>
  
  <p>That's correct. However:</p>
  
  <p><img src="https://i.stack.imgur.com/ikuuf.jpg" alt="enter image description here"></p>
  
  <p>That's not correct (should be inline with the text).</p>
  
  <p>Code is like follows:</p>
  
  <pre><code>&lt;div class="text"&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i&lt;/div&gt;
    &lt;a href="#"&gt;More&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>.text{
     display: inline;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     line-height: 24px;     /* fallback */
     max-height: 48px;      /* fallback */
     -webkit-line-clamp: 2; /* number of lines to show */
     -webkit-box-orient: vertical;
  }
  
  .text a {
      position: absolute;
  }
  </code></pre>
  
  <p>I guess must be easy... Thank you in advance.</p>