Hi,
In the screenshot, you can see that the paragraph has three lines. I want to limit it to two lines followed by three dots or an ellipsis.
The line height is 16px.
Here’s a nocode approach if you prefer, in your case you’d add the custom attribute wfu-truncate = 2 to your text element. The CSS stylesheet here takes care of the rest.
Thank you for taking the time and creating this video! I appreciate it!
I have created a new tag(screenshot below) and injected the code you have given on the home page. And it won’t work. Should I keep only one tag?
Hi @Sarowar_Hossain if you have more classes selectors you need to add this selector as argument so JS will be able to select element.
const dog = Array.from(document.querySelectorAll(".paragraph.excerpt"));
// !!! no space between .paragraph and .excerpt !!!
This will grab all element with combo-class mean ONLY .paragraph elements that have .excerpt class assigned. You can read articles about CSS specificity.
You can also grab only paragraph with same effect as you getting innerText but in this case all paragraphs will have truncation applied.
You can add to this text element only class excerpt all is up to you.
EDIT:
you have also wrong naming use singular for your classes mean use excerpt and no excerpts
hi @Sarowar_Hossain you are using my example without taking in consideration that my code is only example and you should customise it to your needs.
Your selector is paragraph-3 and in my example is paragraph. As I have posted method argument have to be your selectors (class names) that JS will be able to find these. So all you should do to add correct selectors => .paragraph-3.excerpt
If you will in future change element classes ( by adding, removing or renaming) you have to reflect these changes in code to be able select required element. Hope that make sense.