CSS text ellipse, including the More link

Question

So, I have the following script that set the ellipsis in the text to two lines. Then I want to have an “Advanced” link with text.

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

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

It is right. But:

This is incorrect (must be embedded in the text).

The code is as 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 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 think it should be easy ... Thanks in advance.

Answer 1

The diversion inside the .text is still displayed as a block element. Use this to fix:

 .text > div { display: inline; } 

http://jsfiddle.net/csYjC/2880/

Answer 2

DEMO: http://jsbin.com/hatuv/1/edit

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

CSS

 .text { overflow: hidden /* just for clearing */ } .text p { display: inline-block; text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; margin-top: 0; box-sizing: border-box; padding-right: 40px; margin-right: -40px; } .text a { float: right } 

Answer 3

a clean base of css methods on -webkit-line-clamp, and you can customize ... more content, like a boss:

 @-webkit-keyframes ellipsis {/*for test*/ 0% { width: 622px } 50% { width: 311px } 100% { width: 622px } } .ellipsis { max-height: 40px;/* h*n */ overflow: hidden; background: #eee; -webkit-animation: ellipsis ease 5s infinite;/*for test*/ /** overflow: visible; /**/ } .ellipsis .content { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; font-size: 50px;/* w */ line-height: 20px;/* line-height h */ color: transparent; -webkit-line-clamp: 2;/* max row number n */ vertical-align: top; } .ellipsis .text { display: inline; vertical-align: top; font-size: 14px; color: #000; } .ellipsis .overlay { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; overflow: hidden; /** overflow: visible; left: 0; background: rgba(0,0,0,.5); /**/ } .ellipsis .overlay:before { content: ""; display: block; float: left; width: 50%; height: 100%; /** background: lightgreen; /**/ } .ellipsis .placeholder { float: left; width: 50%; height: 40px;/* h*n */ /** background: lightblue; /**/ } .ellipsis .more { position: relative; top: -20px;/* -h */ left: -50px;/* -w */ float: left; color: #000; width: 50px;/* width of the .more w */ height: 20px;/* h */ font-size: 14px; /** top: 0; left: 0; background: orange; /**/ } 

 <div class='ellipsis'> <div class='content'> <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> <div class='overlay'> <div class='placeholder'></div> <div class='more'>...<a href="http://hai.li">more</a></div> </div> </div> </div> 

Answer 4

well, using flexbox is easy. Try it around

 .text { display: flex; > div { flex: 0 0 40%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } 

https://codepen.io/baagii95/pen/byeNqZ

By the way, I used sass. If you want a CSS version, try this.

 .text { display: flex; } .text > div { flex: 0 0 40%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 

Answer 5

Just add a div for some class and give it display:inline; :

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

and

 body { margin: 20px; } .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; } .loremclass{display:inline;}