Truncate Text w/ Ellipsis ❺
Line-clamp your plain-text content to a maximum number of lines, to keep your layout tidy.
Overview
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.
Demonstration
Usage Notes
Add the SA5 Library
First, add the library as detailed in Quick Start.
I want this text element to be truncated to N lines
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.
Questions? Feature Requests?
Visit the SA5 forum link at the top of this page.
Last updated
