javascript/php - shorten string to fit into a certain # of lines

Question

I have a string that must fit into a box, and must be at most 3 lines long. To shorten it, I plan to truncate it and end it with '...'. I could shorten it to a certain # of characters but if i make it look good with "wwwwwwwww [...] wwww" it won't look right with "iiiiiiiiiii [...] iiii".

Is there some way I can shorten it by how much space the string would take up, as opposed to how many characters there are in a string without using a fixed-width font? Ideally I'd like to do this server-side (php) but recognize that actual character width stuff is far more likely to be feasible client-side (JS / jQuery)

Mala

ps. Please no "simply create an image of '...' and overlay it over the end of the line" hacks or similar - I actually want to shorten the string to the appropriate length

Answer 1

There's imageftbbox and imagettfbbox for that.

Answer 2

have a look at this: http://www.switchonthecode.com/tutorials/javascript-tutorial-how-to-auto-ellipse-text

Answer 3

This site offers as good a way as any, and is cross-browser. I like the simplicity:

Answer 4

There's no way that I can think of to easily get font sizes to the degree that you speak of, but there may be a hack that would "appear" the way you want. I assume since you mention three lines, we're talking about a <textarea> element:

<textarea rows="3" cols="50" style="overflow:hidden;"></textarea>

Although the text is there, it's not visible and the scroll bars would not display.

Answer 5

There is a number of jQuery plugins for this: http://plugins.jquery.com/taxonomy/term/2229