Truncate a label: find out when text overflows a 2-row 400px-long label.

Question

I have a (fixed-width and height) label which sums up a long list of selection criteria, and the specs say that, if label content exceeds 2 lines @ 400px, it should be trimmed, an ellipse should be added, and the rest should be displayed in a hovered div on mouseover, à la tooltip. I'd like some advice on which is the best way to pick the trim point.

So far, I only have two ideas, and I'm not terribly happy with either of them:
- I guesstimate truncation, based on content length; I find this is particularly unwise, since (1) I'm using proportional fonts, and (2), this being a two-line text, wraparound can easily make a mess of it. - I use a second, hidden label, and get width in javascript. Slightly better, but would disagree with wraparound, since the hidden label would be 1 line only.

Whatever solution I end up implementing, I'll probably have to do this strictly in JavaScript.

Answer 1

Is it not possible to hide a label and then set its width to 400px? Then you could just measure height on the hidden label, and keep removing letters until its down to only two lines, the would give you the number of letters to keep in the original label. But maybe styling goes out the window when the label is hidden? Im not sure.