CODEWITHSUNDEEP
css
Patrick Keane
Patrick Keane

Reputation: 673

Can I use the text-overflow property to trim text displayed on multiple lines?

Can I use the text-overflow: ellipsis; property to append '...' to the end of a multi-line text element?

I have 3 lines of text inside a div with constrained proportions. If the text is too long, I want '...' appended like the text-overflow property does, except I can only get this to work on one line text.

Take a look:

HTML

<h1 class="titlearea">Joe Soap told me this morning that he burnt his toast badly</h1>

CSS

.titlearea {
line-height: 1;
font-size: 25px;
height: 75px;
overflow: hidden;
}

DESIRED RESULT:

Joe Soap told
me this morning
that he burnt...

Here would be a JavaScript answer, in case anybody's interested:

$('.titlearea').each(function() {
    var that = $(this),
        title = that.text(),
        chars = title.length;
    if (chars > 75) {
        var newTitle = title.substring(0, 73) + "...";
        that.text(newTitle);
    }
});

I would prefer not to use JavaScript though because it isn't a good way of finding out if text needs to be trimmed: since text will wrap to the next line if the word is too long. (i.e. resulting sometimes with big whitespaces which cannot be accounted for this way).

So can I do this with just CSS?

EDIT: What about using 'em'? If my font-size was 25px, and my height was 3em, would this equate to height of 75px? (hence, insuring that the div ends after 3 lines, and not 3 and a bit lines, causing the tops of letters to appear for the 4th line. (Its gonna be different for each browser, especially mobile)).

Upvotes: 0

Views: 287

Answers (4)

Gerico
Gerico

Reputation: 5179

I don't think at the moment there is a reliable way using just CSS to achieve this. I did find this: http://codepen.io/Merri/pen/Dsuim

You can see the strange Flex Box for webkit browsers methods. But they also show you clamp.js

Upvotes: 0

Shailendr singh
Shailendr singh

Reputation: 686

you can use as like:---

 .titlearea{  
     text-overflow: ellipsis;        // IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+
     -o-text-overflow: ellipsis;     // for Opera 9 & 10
      -ms-text-overflow: ellipsis;   //IE 8
   }

Upvotes: 1

swervo
swervo

Reputation: 769

For webkit browsers you can explore:

-webkit-line-clamp

I've used it in the past and it has worked OK.

http://dropshado.ws/post/1015351370/webkit-line-clamp

Upvotes: 1

Arun Manjhi
Arun Manjhi

Reputation: 173

You can Use 

    <h1 class="titlearea" style="text-overflow:ellipsis;"> 
Joe Soap told me this morning that he burnt his toast badly</h1>

Upvotes: 0

Related Questions