So I have a <div></div>. I want to know how much (in length) of a string will fit in it before it wraps to the next line. The script should take into account the width of the element (real clientWidth), the left and right margins, and the left and right paddings.

<div id="stackoverflow"></div>

And JavaScript, assuming the magic function is calculate:

calculate("#stackoverflow","the string to be inputed to the div");
// That should either output how much of the string fits in the div
// or the string's length if it fits without wrapping.

The selector #stackoverflow isn't important, it's just easier to understand.

At this point, my only idea is to have a while loop that adds a character to the div and then checks if the div has wrapped, and if not continue etc then return the character count, but it takes too long!

I honestly don't care if an answer uses jQuery, since I can pretty much translate it to plain JS without any pain.

So I have a <div></div>. I want to know how much (in length) of a string will fit in it before it wraps to the next line. The script should take into account the width of the element (real clientWidth), the left and right margins, and the left and right paddings.

<div id="stackoverflow"></div>

And JavaScript, assuming the magic function is calculate:

calculate("#stackoverflow","the string to be inputed to the div");
// That should either output how much of the string fits in the div
// or the string's length if it fits without wrapping.

The selector #stackoverflow isn't important, it's just easier to understand.

At this point, my only idea is to have a while loop that adds a character to the div and then checks if the div has wrapped, and if not continue etc then return the character count, but it takes too long!

I honestly don't care if an answer uses jQuery, since I can pretty much translate it to plain JS without any pain.

• javascript
• word-wrap

Share Follow edited Nov 4, 2012 at 4:17 JCOC611 asked Feb 8, 2011 at 2:44 JCOC611JCOC611 19.8k1515 gold badges7171 silver badges9090 bronze badges 3

• 2 no easy way to do this unless you are using a monospace font and fixed size...which will promptly break anyways if user zooms in or out... – CrayonViolent Commented Feb 8, 2011 at 2:52
• 1 what's your goal here? if your goal here is for text not to wrap, then try for a css solution first – corroded Commented Feb 8, 2011 at 3:15
• well yes the idea is for the text not to wrap, but I seriously doubt CSS could be of any help here. The simplest way to say it is that the text will look wrapped but will actually be separated into divs. – JCOC611 Commented Feb 8, 2011 at 3:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Your method is good, but can be optimised:

You can render a copy of the div off-screen (and as an immediate child of body) to minimize reflows and repaints.

Also start with an estimate of the number of characters by measuring the width of say 5 characters (the more the better the estimate) and divide the clientWidth by this width. Then you can add/subtract characters from there. If you're doing this for multiple divs of the same width, then cache the previous value as the starting estimate for the next line.

There are too many details out of your knowledge and control that can make anything other than asking the browser mess up. But if you wish to speed it up, the simplest is to do a binary search to figure out where the div wraps. That will be an order of magnitude improvement on the solution that you say is too slow.