How can I count text lines inside an DOM element? Can I?

by

If the div’s size is dependent on the content (which I assume to be the case from your description) then you can retrieve the div’s height using:

var divHeight = document.getElementById('content').offsetHeight;

And divide by the font line height:

document.getElementById('content').style.lineHeight;

Or to get the line height if it hasn’t been explicitly set:

var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");

You will also need to take padding and inter-line spacing into account.

EDIT

Fully self-contained test, explicitly setting line-height:

function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}
<body onload="countLines();">
  <div id="content" style="width: 80px; line-height: 20px">
    hello how are you? hello how are you? hello how are you? hello how are you?
  </div>
</body>

More Related Contents:

  1. How can I change an element’s class with JavaScript?
  2. Is there a spec that the id of elements should be made global variable?
  3. Converting HTML string into DOM elements?
  4. Check if an element contains a class in JavaScript?
  5. Changing CSS Values with Javascript
  6. Get next / previous element using JavaScript?
  7. How to resolve the C:\fakepath?
  8. Get selected option text with JavaScript
  9. Can I load an entire HTML document into a document fragment in Internet Explorer?
  10. What is innerHTML on input elements?
  11. Getting value of HTML Checkbox from onclick/onchange events
  12. JavaScript DOM: Find Element Index In Container
  13. Adding an onclick event to a table row
  14. Select all elements with a “data-xxx” attribute without using jQuery
  15. Is innerHTML asynchronous?
  16. Does the onchange event propagate?
  17. Change ‘s option and trigger events with JavaScript
  18. Is there any “on DOM change” event? [duplicate]
  19. Can I apply CSS to the elements within an iframe?
  20. Changing the order of elements
  21. createElement vs. createElementNS
  22. Why does getElementById not work on elements inside the document element? [duplicate]
  23. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  24. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  25. Uncaught TypeError: Cannot read property ‘top’ of undefined
  26. getElementsByClassName() with two classes
  27. Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game
  28. What is the difference between `firstChild` and `firstElementChild`?
  29. How can I get access to a Highcharts chart through a DOM-Container?
  30. How can I remove wrapper (parent element) without removing the child?

Leave a Comment