Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to remove the existing text inside <p> tag if the text is greater than 100 or specific length using javascript

is there any way to delete or replace text with (…) if the text is inside the .class p tag is greater than 100 characters?

Example I have this long text inside on the p tag:

<div class='classname'>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat vestibulum ante. Praesent in fermentum turpis. Nam nec erat vulputate, imperdiet mi ac, porttitor diam. Quisque posuere odio vel nulla varius dictum. Vestibulum malesuada tellus id cursus pretium. Cras volutpat, diam vel molestie bibendum, neque risus ullamcorper augue, vel convallis odio purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>

Expected Result:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat …

>Solution :

let peles = document.querySelectorAll('.classname > p')
for(p of peles){
  let txt = p.innerText
  txt = txt.replace(txt.substring(100),'...')
  p.innerText = txt
}
<div class='classname'>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat vestibulum ante. Praesent in fermentum turpis. Nam nec erat vulputate, imperdiet mi ac, porttitor diam. Quisque posuere odio vel nulla varius dictum. Vestibulum malesuada tellus id cursus pretium. Cras volutpat, diam vel molestie bibendum, neque risus ullamcorper augue, vel convallis odio purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
<div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading