Multi-line text overflow: ellipsis in CSS or JS, with img tags

Question

I tried using:

• CSS3 text overflow dot function (but does not support multi-line)
• several jquery plugins like dotdotdot ( http://dotdotdot.frebsite.nl/ )
• jquery autoellipsis ( http://pvdspek.github.com/jquery.autoellipsis/ ).

All of these tools work very well, but if the content has images, the calculated height for truncating with dotdotdot or jquery.autoellipsis is wrong.

I'm just wondering if anyone has a great idea to solve this problem (maybe on the server side?), Thanks in advance :-).

Answer 1

Use your own ellipsis positioning offsets by setting a fixed height for a multi-line div , and then absolutely positioning img and ellipsis to simplify the script. Correct offset is specific for font-size and kerning of individual letters of each sentence, so trial and error is necessary if a monospace font is not used. The basic structure looks something like this:

 <style type="text/css"> .truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; } .lineup { top: 6px; } .monalisa { position: absolute; top: 2px; left: -18px; } .wrapper { position: relative; width: 360px } .textblob { width: 330px; height: 30px; } </style> <!--...--> <div class="wrapper"> <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/> <div class="textblob"> <span class="truncate">…</span> <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span> </div> </div> 

Answer 2

If you need X-Browser support (not only for Opera and Webkit, for example @ c69).

I found a more fancy way. But also for manual tuning.

take a look at the working jsfiddle example.

HTML

 <p> Lorem ipsum dolor sit amet, consectetur </p> 

CSS

 p { height: 3.7em; position: relative; overflow: hidden; width: 235px; } p:after{ /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); /* for IE9,IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); bottom: 0; content: "..."; float:right; padding-left: 10px; position: absolute; right: 0; } 

A source:
1 mobify
2 css tricks