Hello, Friends back with another Javascript Tricks post. This trick is already there on the internet but we are adding this trick to make you understand how actually its works and created.
Introduction:
To Count Number of Lines Inside Any DOM Element, we first need to calculate these styles from the Element.
- The First Thing is to get the Height of the Element.
- Then We need to get the Line Height of the text inside that Element.
- Then We will be using the formula to get the Estimated Number of lines of that element.
Formula To Count Number Of Lines in Any HTML Element:
Total Height of the Element / Line Height of the Content Inside that Element.
The Formula is very simple we need the total height of the element and divide it with the line-height of the content inside that element.
Common Problems / Mistakes:
The main problem that can a developer's face is not getting the line-height of the element if it is not explicitly set.
Means we need to explicitly set the Line-height of the element so that we can get the value otherwise we will get a normal implicit value instead of a number.
Even if we convert that normal value to a number that means the default line-height is slightly changed in few browsers that can cause some serious issues.
Instead of setting the line-height every time through CSS, we can set it through Javascript DOM methods.
Let see the Code to explicitly add line-height through Javascript.
The Code:
<script>function ABT_CountLines(Element){//Settings to Set The Line-height change the line-height and playlet ABT_LineHeight = "1.3em";let ABT_Element = document.querySelector(`${Element}`);// We are using this getCompuedStyle Method because it auto-update when// changed.let CodeBlockStyles = window.getComputedStyle(ABT_Element, null);ABT_Element.style.lineHeight = ABT_LineHeight;let CodeBlockHeight = ABT_Element.clientHeight;let boxSizing = CodeBlockStyles.getPropertyValue("box-sizing");/*This Below Conditional Statement is Inspired by an answer from StackOverflowlink to the answer: https://stackoverflow.com/a/37623987/5321854*/if(boxSizing === 'border-box'){var padding_top = parseInt(CodeBlockStyles.getPropertyValue("padding-top"));var padding_bottom = parseInt(CodeBlockStyles.getPropertyValue("padding-bottom"));CodeBlockHeight = CodeBlockHeight - padding_top - padding_bottom;}let lineHeight = CodeBlockStyles.getPropertyValue('line-height');let TotalLines = Math.floor(CodeBlockHeight/parseInt(lineHeight));console.log(TotalLines)return TotalLines;}</script>
ABT_CountLines(".post-body");
The Red highlighted text is where you need to add your element id or class name to calculate the number of lines in that given element.
To invoke the above function you need to call it wherever you want the number to appear.
The purple highlighted text in the code editor is inspired by an answer from StackOverflow you can see a link to that answer in the code section above.
Explanation:
We are using getCompuedStyle Method because it dynamically gets updated and gives us the updated values.
After that, we are fetching all the important properties of the element like line-height, height, padding-top and bottom.
When we get these values we need to apply a condition whether the box-sizing is border-box if it's true then we need to subtract padding top and bottom from the height.
We are using the clientHeight Property instead of offsetHeight because client height includes height with padding but no border and margin where offsetHeight includes padding, borders no margin
In this case, we don't need borders so we used clientHeight to avoid extra work.
After this apply the formula and get the number of lines.
This is so far the best solution to get the number of lines but if you have a much better solution then you are most welcome.
Read More >>
