Truncate Text w/ Ellipsis ❺
Line-clamp your plain-text content to a maximum number of lines, to keep your layout tidy.
Last updated
Line-clamp your plain-text content to a maximum number of lines, to keep your layout tidy.
Last updated
Often, it is desirable to truncate plain text excerpts so that they do not break your layout, particularly when that text is variable ( coming from the CMS ), and when your layout involves a grid arrangement such as a card layout.
Modern CSS does provide a solution for this, but the required settings are not yet built into the Webflow designer.
So, here’s a solution that gives you what you need.
SA5's external CSS libs are only loaded in your published site, so you will not see the truncation in the designer.
First, add the library as detailed in Quick Start.
Add the wfu-truncate custom attribute your element. If it exceeds the line count you specify, you'll see an ellipses ( ... ) at the point of truncation.
Use a value of 1 to 5 to specify the number of lines.
e.g.;
Truncation will only appear in the published site, not in the designer.
Visit the SA5 forum link at the top of this page.
