Step 1 − Create a HTML template, add a div element in it with line-height. Line-height is the height of the particular line. Also create a span tag in which the output will be generated.
<html>
<head>
<title>Count the text lines inside of DOM element</title>
</head>
<body>
<div id="lines" style="line-height: 30px;">
Welcome to tutorialspoint<br>
Visit us at: https://www.tutorialspoint.com/<br>
Buy the course of your domain <br>
Get the certificate <br>
Thank you for visiting<br>
</div>
<strong style="border: 2px solid black; padding: 0.1rem;">
Total number of lines:
<span id="out"></span>
</strong>
<script>
var a = document.getElementById("lines");
var domHeight = a.offsetHeight;
var linesHeight = parseInt(a.style.lineHeight);
var totalLines = domHeight / linesHeight;
document.getElementById("out").innerText=totalLines;
</script>
</body>
</html>
In this example, we will calculate the number of lines by using the array split() method in which we will access the DOM in a variable and with the help of split(“
”) method we will pass a line break as argument which will store all the element in an array as the line breaks. After which we will calculate the length of an array, which will return the number of text lines available in the DOM.
Count the text lines inside of DOM element
Welcome to tutorialspoint
Visit us at: https://www.tutorialspoint.com/
Thank you for visiting
Total number of lines:
<script>
const textLines = document.getElementById("lines").innerText;
const numLines = textLines.split("").length;
document.getElementById("out").innerText=numLines-1;
</script>
登录后复制
In the below image, it shows the output of the above example. In which all the three text lines are stored in the array as an element. So on calculating the length of an array it will return 3.
