4

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

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
JackW
  • 999
  • 11
  • 22
  • 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 Dec 19 '13 at 15:52
  • 2
    See: [this](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) and [this](http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/) – tjboswell Dec 19 '13 at 15:54
  • @teabos thanks! The stackoverflow you linked with the jquery plugin was just what I was looking for. – JackW Dec 19 '13 at 16:07
  • 1
    I'd go with Yuriy's suggestion over a jQuery plugin. – APAD1 Dec 19 '13 at 16:09
  • @StormDrive I agree with APAD1, go for a css solution over jQuery if you can – tjboswell Dec 19 '13 at 16:10

2 Answers2

6

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.

cocco
  • 16,442
  • 7
  • 62
  • 77
4

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/

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • Works fine except that it still adds it even if the string is truncated, but with a small amount of javascript I can fix that. Thanks for the help! – JackW Dec 19 '13 at 16:48