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.
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.;
wfu-truncate = 3
Questions? Feature Requests?
Visit the SA5 forum link at the top of this page.
Last updated
Was this helpful?