How to count number of characters in a line using JavaScript

Question

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.

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
– NullUserException, Commented Nov 13, 2011 at 19:01
Doesn't this also depend on font-size and font-weight aswell as paddings etc.? — Smamatti
– Smamatti, Commented Nov 13, 2011 at 19:02
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
– 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
– david, Commented Nov 13, 2011 at 19:05
You can use parts of my code in the answer to this question and add characters until the scrollWidth is more than the clientWidth. — user447356
– user447356, Commented Nov 13, 2011 at 19:08

J. K. · Accepted Answer · 2011-11-13 20:35:34Z

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

edited Nov 13, 2011 at 20:35

answered Nov 13, 2011 at 20:29

J. K.

8,3781 gold badge38 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lydiaP Over a year ago

Tried this approach today, and needed to change "span.clientWidth" with "span.getBoundingClientRect().width ", as "span.clientWidth" was always returning 0.

Esailija · Accepted Answer · 2011-11-13 19:08:59Z

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/

answered Nov 13, 2011 at 19:08

Esailija

140k24 gold badges280 silver badges328 bronze badges

1 Comment

david Over a year ago

thanks, i learn some thing new every day text-overflow:ellipsis

Community · Accepted Answer · 2017-05-23 12:25:05Z

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.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 13, 2011 at 19:10

Yogu

9,5655 gold badges40 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to count number of characters in a line using JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related