Truncating strings to a specific number of lines (javascript/jquery)

[colonel_mortis]

I am retrieving a string from the YouTube API (the video description) and shortening it in my PHP code to 170 characters. However, when it displays, it's normally fine, but if it contains a URL, it will wrap and leave a lot of whitespace because I'm trying to display it in a narrow box, which results in some content overflowing. Is it possible to use javascript or JQuery to truncate the string on the client side so that it fits in the box and still ends in an ellipsis if truncated?

I can upload a screenshot if that would help.

[xXxYOLOxSWAGxXx_420BlazeIt]

Upload a screenshot or post a link to the site.

 

Why not hide overflow using CSS?

[colonel_mortis]

Upload a screenshot or post a link to the site.

 

Why not hide overflow using CSS?

I would just hide the overflow, but it wouldn't put in an ellipsis. I will do that if there's no other practical way though.

It's currently not live on the internet.

[xXxYOLOxSWAGxXx_420BlazeIt]

I would just hide the overflow, but it wouldn't put in an ellipsis. I will do that if there's no other practical way though.

It's currently not live on the internet.

 

If you dont need the links, then you could use a regular expression to remove them. if you DO need the links there then you could replace use a regular expression to replace them with a hyperlink instead.

 

http://php.net/str_replace

http://www.php.net/manual/en/function.preg-replace.php

[colonel_mortis]

If you dont need the links, then you could use a regular expression to remove them. if you DO need the links there then you could replace use a regular expression to replace them with a hyperlink instead.

 

http://php.net/str_replace

http://www.php.net/manual/en/function.preg-replace.php

It's supposed to be a sample of the description, like you get on the youtube subscription feed/search results. However, the links make it wrap onto the next line because they're too long. Thanks for the guidance on turning them into real links though, I will put that in. But is there any way to truncate the description if it's too long (on the left image it would cut down to everything above the blue line).

[xXxYOLOxSWAGxXx_420BlazeIt]

It's supposed to be a sample of the description, like you get on the youtube subscription feed/search results. However, the links make it wrap onto the next line because they're too long. Thanks for the guidance on turning them into real links though, I will put that in. But is there any way to truncate the description if it's too long (on the left image it would cut down to everything above the blue line).

yes, you could use substr() to shorten the string to a number of characters, and also replacing a url like: http://youtube.com/?watch=whatever with a link using http://y2u.be/ would help too.

 

 

Or perhaps expand the container element using a javascript animation when the user clicks/mouses over it or something

[colonel_mortis]

yes, you could use substr() to shorten the string to a number of characters, and also replacing a url like: http://youtube.com/?watch=whatever with a link using http://y2u.be/ would help too.

 

 

Or perhaps expand the container element using a javascript animation when the user clicks/mouses over it or something

But shortening the number of characters won't help because I don't know how much to shorten it by. In the image, both descriptions have the same number of characters, but because one has a URL, it has wrapped onto a new line and the description is longer, overflowing out of the box.

The text is from the youtube API, so I have no control over what's actually in it, and I would rather not actually mess around with links and things in the descriptions of other people's videos.

[colonel_mortis]

Never mind, it was fixed on stackoverflow. http://stackoverflow.com/questions/20685684/truncating-text-to-specifc-number-of-lines-after-formatting?noredirect=1#comment30978628_20685684