is there a way to count number of lines in a div and get the textContent of first couple lines- Javascript

Question

My goal is to get the length of textContent of first 3 lines in a div. Ex:

<div id="content" style="width: 100%;  
                line-height: 20px"> 
        <p>hello how are you?</p> 
        <p>hello how are you too?</p> 
        <p>hello how are you john? </p> 
        <p>hello how are you sphia?</p> 
    </div>

I'm able to count number of lines contained in the div using:

 function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}

however I want to know wether there is a way to find the length of text of the first 3 lines, in above case:

 <p>hello how are you?</p> 
            <p>hello how are you too?</p> 
            <p>hello how are you john? </p>

lets say I do:

var lines = countLines(); // 4
if (lines > 3) {
  test = document.getElementById("content").textContent.length;
// get the length of first 3 lines
}

is this possible in javascript ?

with 2.5k reps. you still haven't heard of [runnable snippets](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/)? — Tibebes. M, Jan 08 '21 at 08:25
when you build the sum of the length of the first three elements? — Aalexander, Jan 08 '21 at 08:26
@Tibebes.M: I'm not sure how runnable snippets help here. care to elaborate? — user1234, Jan 08 '21 at 08:37
@Alex: yes the length of text: ex- ```str= "How are you"; str.length``` updated in the question above: ```test = document.getElementById("content").textContent.length;``` — user1234, Jan 08 '21 at 08:38
@user1234 sure. It's simple; since your code is only HTML/Js (runnable on browser). You should demonstrate the issue via a runnable snippet so that we can easily see what the problem is without having to copy and paste. — Tibebes. M, Jan 08 '21 at 08:41
Ps: I added a quickly made fiddle in my answer to the [linked question](https://stackoverflow.com/questions/55604798/find-rendered-line-breaks-with-javascript) to make it work also on elements. — Kaiido, Jan 08 '21 at 09:25

WiatroBosy · Accepted Answer · 2021-01-08T08:50:48.713

2

If you want in jQuery

let p = $('#content').find('p');

for (i = 0; i < 3; i++) {
  console.log($(p[i]).text().length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div>

End js

let p=document.getElementById("content");
let v=p.getElementsByTagName("p"); 
for (i = 0; i < 3; i++) {
  console.log(v[i].innerHTML.length);
}

<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div>

edited Jan 08 '21 at 08:50

answered Jan 08 '21 at 08:42

WiatroBosy

1,076
1
6
17

@WiatroBosy- thanks for your answer- wondering if all the tags in the``` div``` are not```
``` tags, ```let v=p.getElementsByTagName("p");``` wont work in that case. ex: ```
hello how are you?

hello how are you too?
- hello how are you john?
hello how are you sphia?
``` is there a dynamic way of handling this rather than hardcoding the tag?
– user1234 Jan 08 '21 at 18:00
I do not understand . Try to ask the question better or show an example – WiatroBosy Jan 08 '21 at 18:07
You can try let v=p.getElementsByTagName("*"); OR document.querySelectorAll( 'body *' ); – WiatroBosy Jan 08 '21 at 18:08
actually i founf it- i used- ```childNodes``` on the selector to get the array like structure for looping. thanks – user1234 Jan 08 '21 at 18:11

is there a way to count number of lines in a div and get the textContent of first couple lines- Javascript

1 Answers1