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.
Awesome and very easy solution! Thanks so much. Just wondering, is there any way to use this method with greater than 5 lines (i.e. set the attribute to say, 10 lines?)
Awesome! Thanks so much
And agreed that it is a bit atypical, and I don’t even have an exact use case for it at the moment, but was just hoping to better understand the solution and how it works - what you provided is perfect.
Will try these out soon. Cheers
Ah sweet, also, Sygnal Attributes has always been open source for the community, you can find this particular feature here, It’s a very simple bit of CSS.
I’ve tried the solution and I can’t get it to work. I must be doing blindingly obvious wrong, but I just can’t figure it out. Would you mind helping?
Hey FRNZY, the wfu-truncate = 3 isn’t a style, it’s a custom attribute setting.
You’ll find those towards the bottom of the element’s settings panel ( gear icon, top right )