How to count text lines inside of DOM element ?

Last Updated : 07 Feb, 2023

In this article, we will see how to count the number of text lines inside of the DOM element. To count the number of text lines inside the DOM element, we will use the following approach.

Obtain the total height of the content inside the DOM element.
Obtain the height of one line.
By dividing the total height of the content by the height of one line, you get the total number of lines inside the element.

Example: This example uses the above approach and prints the number of text lines inside the DOM element.

html

<h1 style="color: green;"> GeeksForGeeks </h1> <div id="content" style="width: 100%;   line-height: 20px"> hello how are you?<br> hello how are you?<br> hello how are you? <br> hello how are you?<br> </div> <button onclick="countLines()"> Count lines </button> <script>  // Function to count total  // number of lines  function countLines() {    // Get element with 'content' as id   var el =   document.getElementById('content');    // Get total height of the content   var divHeight = el.offsetHeight    // object.style.lineHeight, returns   // the lineHeight property  // height of one line   var lineHeight =   parseInt(el.style.lineHeight);    var lines = divHeight / lineHeight;  alert("Lines: " + lines);  } </script>