How can I measure how many characters will fit the width of the document?

Question

I need to write, in JavaScript (I am using jQuery), a function that is aware of the number of characters that fit in a line of the browser window. I'm using a monospace font to ease the problem, but it would be better if I generalize it for different fonts.

How can I know how many characters would fill a row in the browser? The intention is to count the number of characters that fill a line.

Answer 1

You can create element and append characters to it until you detect wrapping, e.g. by observing changes in offsetHeight (you can optimze it using bisection algorithm).

This is of course very dependent on browser, system, installed fonts and user's settings so you would have to calculate it for each fragment of text each time page is displayed, resized or when user changes font size (even full-page zoom introduces some off-by-one errors which could cause number of characters change).

Therefore it may be an overkill in most situations and when implemented poorly cause more trouble than it solves.

There are other solutions, e.g. if you want to ensure that only one line is visible you can use white-space:nowrap and overflow:hidden and in some browsers text-overflow:ellipsis to make text cut nicely. Or if you don't want words cut, use 1-line high container with overflow:hidden.