How can i truncate a css class at n value

Question

I need a CSS Code or JavaScript Code that can trim a text using it css class.

<h4>
<p class="maocular">12 Chicken Franks Sausage</p>
</h4>

I want to trim any text with css class maocular to 10Characters Pls how can i achieve that with CSS or JavaScript

[I think this is what you're looking for](https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css/26975271) — Carson Burke, May 12 '21 at 05:03
@CarsonBurke That still dont solve what i want to achieve, i am having a distorted view and it is not breaking to the next line — Ambassador Akinwumi Michael, May 12 '21 at 05:30

score 0 · Answer 1 · answered May 12 '21 at 10:25

Using Javascript first get all the elements in the document that have that specific class.

Then iterate through them, picking up their innerHTML and getting just the first 10 characters.

Note: this snippet assumes that the innerHTMLs have only text, with no additional HTML markup in them.

const elements = document.querySelectorAll('.maocular');console.log(elements);
elements.forEach(element => {
  element.innerHTML = element.innerHTML.substring(0,10);
});

<h4>
<p class="maocular">12 Chicken Franks Sausage</p>
</h4>

How can i truncate a css class at n value

1 Answers1