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:

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:

• javascript
• css

• What's your code look like for what you're doing now? Can you provide a jsfiddle so we can see what you're trying to do already? – MattD Commented Dec 19, 2013 at 15:52
• 2 See: this and this – tjboswell Commented Dec 19, 2013 at 15:54
• @teabos thanks! The stackoverflow you linked with the jquery plugin was just what I was looking for. – JackW Commented Dec 19, 2013 at 16:07
• 1 I'd go with Yuriy's suggestion over a jQuery plugin. – APAD1 Commented Dec 19, 2013 at 16:09
• @StormDrive I agree with APAD1, go for a css solution over jQuery if you can – tjboswell Commented Dec 19, 2013 at 16:10

2 Answers 2

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/rmy2Y/

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

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/tFZEb/3/