CODEWITHSUNDEEP
javascriptjqueryhtml
Anoop
Anoop

Reputation: 23208

How to count number of characters in a line using JavaScript

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.

Upvotes: 8

Views: 12686

Answers (3)

J. K.
J. K.

Reputation: 8368

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

Upvotes: 10

Yogu
Yogu

Reputation: 9455

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.

Upvotes: 2

Esailija
Esailija

Reputation: 140236

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/

Upvotes: 5

Related Questions