8

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.

steveax
  • 17,527
  • 6
  • 44
  • 59
Anoop
  • 23,044
  • 10
  • 62
  • 76
  • 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 Nov 13 '11 at 19:01
  • Doesn't this also depend on font-size and font-weight aswell as paddings etc.? – Smamatti Nov 13 '11 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 Nov 13 '11 at 19:02
  • i wanted to do the same, but gave up and just set overflow to hidden – david Nov 13 '11 at 19:05
  • Actually I want to truncate my text inside div so that it exactly fit into that div( text length is very large) – Anoop Nov 13 '11 at 19:06
  • This has basically been asked before: http://stackoverflow.com/questions/6164962/getting-font-metrics-in-javascript -- the short answer is that there is no easy way... – bobbymcr Nov 13 '11 at 19:08
  • 2
    You can use parts of my code in the answer to [this question](http://stackoverflow.com/questions/7872563/largest-text-size-possible-inside-div) and add characters until the `scrollWidth` is more than the `clientWidth`. – Shadow The GPT Wizard Nov 13 '11 at 19:08

3 Answers3

10

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
J. K.
  • 8,268
  • 1
  • 36
  • 35
  • Tried this approach today, and needed to change "span.clientWidth" with "span.getBoundingClientRect().width ", as "span.clientWidth" was always returning 0. – lydiaP Sep 26 '18 at 11:18
5

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/

Esailija
  • 138,174
  • 23
  • 272
  • 326
2

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.

Community
  • 1
  • 1
Yogu
  • 9,165
  • 5
  • 37
  • 58