How to count text lines inside of a DOM element?

Javascript Web Development Front End Technology

Introduction

Before understanding the counting of the lines in a DOM, let's first understand what DOM is? So, DOM is like an API for HTML and XML documents. This logic is enough to understand that DOM is an important concept for web developers. The DOM gives a programming interface for HTML and XML documents that gives programmers control over a webpage's structure, look, and content. So, in this article we will see how to count the number of lines in the given text on the web page in a DOM element.

Method 1: Using the scrollHeight Property

Making use of the scrollHeight property is one technique to determine how many text lines are contained within a DOM element. The height of an element as a whole is returned by this attribute, including any content that is hidden by overflow. We may determine the number of lines by dividing the scrollHeight by the height of a single line of text.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
      popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
      and more recently with desktop publishing software like Aldus PageMaker including
      versions of Lorem Ipsum.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function() {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = element.scrollHeight / fontSize;
         document.getElementById("result").innerHTML = numberOfLines;
      }
   </script>
</body>
</html>

This code first selects the element with the id "my-element" and then uses getComputedStyle to obtain the font-size in pixels (element). You may determine how many lines of text are included in an element by taking its fontSize, parsing the value to float, and dividing the element's scrollHeight by fontSize.

It's important to note that this method might not be completely accurate because it depends on the font size remaining constant throughout the element and ignores any additional spacing or margins that might be used. Additionally, the element must be set to have overflow:visible for this technique to function.

Method 2: Using the clientHeight Property

Using the clientHeight property is another technique to determine how many text lines are included within a DOM element. The height of an element is returned by this property, including the content but excluding padding, border, and scrollbar. We may get the number of lines by dividing the clientHeight by the height of a single line of text.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">
      This code first select the element with id 'my-element' and gets the  font-size in 
      pixels using getComputedStyle(element).fontSize and parse the  value to float and divide
      the scrollHeight of the element by fontSize  which will give you the number of lines of
      text inside the element. It's  worth noting that this method may not be 100% accurate,
      as it relies on  the font size being consistent throughout the element and doesn't take
      into account any additional spacing or margins that may be applied. Also,  this method
      only works if the element is set to have overflow:visible.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function () {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = element.clientHeight / fontSize;
         document.getElementById("result").innerHTML = numberOfLines;
      };
   </script>
</body>
</html>

We again select the element we want to count the lines of using document.getElementById("my-element"). We then use getComputedStyle(element).lineHeight to determine the height of a single line of text. Finally, we divide the element.clientHeight by the lineHeight to calculate the number of lines.

Method 3: Using the offsetHeight Property

A third way to count the number of text lines inside of a DOM element is by using the offsetHeight property. The height of an element is returned by this property, including the content, padding, and border but excluding the scrollbar. We may determine the number of lines by dividing the offsetHeight by the height of a single line of text.

<!DOCTYPE html>
<html>
<body>
   <div id="my-element">There are many variations of passages of Lorem Ipsum available,
       but the majority have suffered alteration in some form, by injected humour, or randomised words
       which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
       need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
       Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
       first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
       with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
       The generated Lorem Ipsum is therefore always free from repetition,
       injected humour, or non-characteristic words etc.
   </div>
   <div id="result"></div>
   <script>
      window.onload = function() {
         let element = document.getElementById("my-element");
         let fontSize = parseFloat(getComputedStyle(element).fontSize);
         let numberOfLines = Math.ceil(element.offsetHeight / fontSize);
         document.getElementById("result").innerHTML = numberOfLines;
      }
   </script>
</body>
</html>

We again select the element we want to count the lines of using document.getElementById("my-element"). We then use getComputedStyle(element).lineHeight to determine the height of a single line of text. Finally, we divide the element.offsetHeight by the lineHeight to calculate the number of lines

Please take an important note here that these methods will only count the visible text lines inside of an element, if the element overflows and has scrollbars, these methods will not work for the text lines that are not visible.

If we want to count the total number of lines including the lines which are not visible, we can use a library such as text-line-count that uses the range.getClientRects() method to determine the total number of lines.

Conclusion

Three approaches to determining the number of text lines contained within a DOM element were covered in this blog post. Each method counts the number of lines by dividing the height of the DOM element—which is determined by a separate property—by the height of a single line of text. The approach you decide on will be determined by the precise specifications of your project and the design of your homepage. Whichever approach you select, it's critical to remember that these estimates could not be totally correct because they are based on the height of a single line of text, which might change depending on the font and size chosen.