CODEWITHSUNDEEP
javascriptcss
JackW
JackW

Reputation: 999

Truncating text to specifc number of lines after formatting

I am making a site which will display some videos from the YouTube API, and truncates the video description to 170 characters on the server side. They have to go in a narrow box so whenever it contains URLs or long words which make it wrap a lot, it can sometimes overflow out of the container. Is there a client side way to truncate the strings and add an ellipsis on the end (I could use overflow:hidden but I can't use an ellipsis with that. It's my last resort).

Here below is an image of what I'm trying to do:

It should look like this

Upvotes: 4

Views: 4360

Answers (2)

suff trek
suff trek

Reputation: 39777

You could use text-overflow:ellipses; but unfortunately this only works with white-space:nowrap which is I don't think you need.

What you can do is do overflow:hidden like you intended and fake ellipses with pseudo-element :after.

Imaginge you have you DIV with text:

<div id="text">
    (really long text here)
</div>

Styled like this:

#text {
    background:white; 
    width:150px;
    height:100px;
    position:relative;
    overflow: hidden;
}

Just add to it

#text:after {
    content:'...';
    position:absolute;
    bottom:0;
    right:0;
    background:inherit
}

And bingo: http://jsfiddle.net/tFZEb/3/

Upvotes: 4

cocco
cocco

Reputation: 16706

The only native way to end with ellipsis a multiline text is -webkit-box & -webkit-line-clamp wich has very low support.

div{
 width:150px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2; /* number of lines to show */
 -webkit-box-orient: vertical;
}

example http://jsfiddle.net/rmy2Y/

else you need to find some css hacks or js scripts.

Upvotes: 6

Related Questions