Rendered pIxel width data for each character in a browser's font

Question

I have a table column that needs to be limited to a certain width - say 100 pixels. At times the text in that column is wider than this and contains no spaces. For example:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

I would like to calculate the width of text server-side and add an ellipsis after the correct number of characters. The problem is that I don't have data about the rendered size of the text.

For example, assuming the browser was Firefox 3 and the font was 12px Arial. What would be the width of the letter "a", the width of the letter "b", etc.?

Do you have data showing the pixel width of each character? Or a program to generate it?

I think a clever one-time javascript script could do the trick. But I don't want to spend time re-inventing the wheel if someone else has already done this. I am surely not the first person to come up against this problem.

Answer 1

How about overflow: scroll?

Answer 2

Ext JS has a module to do just that

TextMetrics Provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide, in pixels, a given block of text will be.

I am sure that there are other libraries available out there that do it as well.