Count lines in HTML with Javascript

Question

I need a way to count lines in the html so I can do logic for a business requirement.

I use Bootstrap + AngularJS but the solution could be in plain Javascript.

I have no idea where to start. Any help?

.myClass {
  word-break: break-all;
  white-space: pre-line;
}

<div style="max-width: 50px">
  <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<span>Total Lines: <b id="totalLines"></b></span>

I also would need a way to calculate this everytime the user makes the window smaller/bigger because of the responsive aspect.

Calculate the line height and then divide the total content height by that? — evolutionxbox
– evolutionxbox, Commented Jan 13, 2020 at 12:33
What is the business requirement? Sounds like an odd request. Maybe there is a better way to solve the underlying issue. — AndreasHassing
– AndreasHassing, Commented Jan 13, 2020 at 12:34
@evolutionxbox I tried that but lineHeight gives me empty "" — user12361681
– user12361681, Commented Jan 13, 2020 at 12:34

Saurin Vala · Accepted Answer · 2020-01-13 12:57:13Z

1

getClientRects will be useful here

The getClientRects() method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.

$("#totalLines").text($(".myClass")[0].getClientRects().length);
console.log($(".myClass")[0].getClientRects().length);

$(document).ready(function() { 
                $(window).resize(function() { 
                console.log("Resize event fired");
                   $("#totalLines").text($(".myClass")[0].getClientRects().length);
                }); 
            });

.myClass {
  word-break: break-all;
  white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width: 500px">
  <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<span>Total Lines: <b id="totalLines"></b></span>

edited Jan 13, 2020 at 12:57

answered Jan 13, 2020 at 12:39

Saurin Vala

1,9381 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user12361681 Over a year ago

looks good. But what if the user changes the browser width/height. How can I know that and recalculate?

Jai Over a year ago

@user12361681 You have to use it in resize event of window.

Collectives™ on Stack Overflow

Count lines in HTML with Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related