How Visually Long is a String?

Question

I'd love to know how long a string is when it appears on the screen. We're not using a fixed width font, so:

"Our mother's tummy makes dummy noises."

is much wider than:

"Lilly Leadbetter lives life leisurely."

Is there a way to tell how long something is by the characters? I don't need pixel perfect accuracy, just long enough to ellipse at roughly the right spot. CSS overflow won't help, because I can't attach the ellipse after CSS has determined how long it is.

Answer 1

Here's a related question with at least a partial solution. Basically the technique is to render the text in a hidden <span> and then (using JavaScript) measure the pixel width of the span, then chop off characters until it fits in your target width.

And here's a jQuery plugin that encapsulates this sort of functionality, linked from this related question.