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

Question

I tried using :

• text-overflow ellipsis feature in CSS3 (but doesn't 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 quite well but if content has images the calculated height for truncation with dotdotdot or jquery.autoellipsis is wrong.

I was just wondering if someone has a great idea for dealing with this (maybe some server-side processing on ?), Thanks by advance :-).

Selfsatisfied

text-overflow: -o-ellipsis-lastline, but it only works in Opera: jsfiddle.net/zGvHW/6 For Webkit browsers you can use -webkit-line-clamp, that cuts the text when it reaches certain number of lines. I don't know about native Gecko or IE methods. – Fathomless

didn't know about -o-ellipsis-lastline, but as you said it only works in Opera. I guess it would be quite complex to implement in javascript for other browsers, but that's exactly what I'm looking for ! – Selfsatisfied

Answer 1

Use your own ellipsis positioning offsets by setting a fixed height for the multi-line div, then absolutely positioning the img and the ellipsis to simplify the script. The right offset is specific to the font-size and kerning of the particular letters of each sentence, so trial and error is necessary unless a monospace font is used. The basic structure is 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>

Adequate

Answer 2

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

I found a more fancy way. But also for manually adjustment.

take a look at a working example on jsfiddle.

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

Source:
1 mobify
2 css-tricks

Melbamelborn