CSS Text ellipsis including "More" link

Question

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.

http://jsfiddle.net/csYjC/2876/

So if our text has more than two lines, it should look like this:

That's correct. However:

That's not correct (should be inline with the text).

Code is like follows:

<div class="text">
  <div>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i</div>
  <a href="#">More</a>
</div>

And the css:

.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;
}

I guess must be easy... Thank you in advance.

Answer 1

Well, here's a kind of a funny solution with pure CSS using pseudo elements. http://jsfiddle.net/j8ekzvLq/

.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;
   position: relative;
   padding-bottom: 24px;
}

.text::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: #fff;
    z-index: 1;
}

.text div {
    background-color: #fff;
    display: inline;
    position: relative;
}

.text div::after {
    content: "";
    background-color: #fff;
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 100%;
    height: 24px;
    z-index: 2;
}

.text a::before {
    content: "More";
    position: absolute;
    bottom: 0;
    left: 0;
    text-decoration: underline;
    z-index: 1;
}