Suppose I have a div with width 200px and font-size 16. Now I want to calculate number of characters that can be fit into a line of div. How can I calculate number of character using JavaScript or jQuery.

Suppose I have a div with width 200px and font-size 16. Now I want to calculate number of characters that can be fit into a line of div. How can I calculate number of character using JavaScript or jQuery.

• javascript
• jquery
• html

• 3 What exactly do you want to accomplish with that? You can't accurately calculate how many characters you can fit with just the font-size anyways. – NullUserException Commented Nov 13, 2011 at 19:01
• Doesn't this also depend on font-size and font-weight aswell as paddings etc.? – Smamatti Commented Nov 13, 2011 at 19:02
• 2 Unless you're using a fixed-width font, there is no single number of characters that will fit into a line of a given width. – Matt Ball Commented Nov 13, 2011 at 19:02
• i wanted to do the same, but gave up and just set overflow to hidden – david Commented Nov 13, 2011 at 19:05
• 2 You can use parts of my code in the answer to this question and add characters until the scrollWidth is more than the clientWidth. – Shadow Wizard Commented Nov 13, 2011 at 19:08

3 Answers 3

Update: Oh, I overlooked the hidden comment. The CSS solution posted above is definitely better for the job. My answer addresses directly the problem of counting the characters that fit on one line. I'm not going to delete it as someone might actually find it useful.

It is definitely possible to get the number of characters you can fit on one line even if you have a proportional typeface. There are two ways—either use the following trick or the measureText method of CanvasRenderingContext2D.

var target_width = 200; // line width
var text = 'Lorem ipsum. I want to know how many chars of this text fit.';

var span = document.createElement('span');
document.body.appendChild(span);
span.style.whiteSpace = 'nowrap';
// define the style
span.style.fontFamily = 'Lucida Grande';
span.style.fontSize = '14px';

var fit = text.length;
for (var i = 0; i < fit; ++i) {
  span.innerHTML += text[i];
  if (span.clientWidth > target_width) {
    fit = i - 1;
    break;
  }
}

document.body.removeChild(span);

// fit = the number of characters of the text
//       that you can fit on one line

Actually I want to truncate my text inside div so that it exactly fit into that div( text length is very large)

You can do this with css:

white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..."

http://jsfiddle.net/46AML/

You can only calculate the numbers of characters per line if the width of each character is the same. This is true for all fixed-width fonts like the one in the question editor of stackoverflow.

If you ensured using a fixed-width font, you can calculate the width of a single character, e.g. using the function posted in this answer. Then, simply divide the width of the <div> through the width of a character.