How to measure characters in javascript and/or with jquery

Question

I need to write in javascript (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.

Thanks.

Answer 1

You can get the total width available for the browser with

window.innerWidth

And then you can get the width of an element with the following method.

document.getElemenById('elem').clientWidth

Answer 2

There is no easy way to do this in HTML.

However, if you really must know, you can probably figure it out with some really ugly javascript:

First, create a <div> with the width you need, put some characters in and request its .height() in pixels. Then, keep adding characters to it and keep checking the .height(), when the height of the <div> changes you know it has grown to fit a new line of text.

Answer 3

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.