Truncate Text w/ Ellipsis ❺
Line-Clamp your plain-text content to a maximum number of lines, for layout.
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 built into the Webflow designer [yet].
So, here’s a solution that gives you what you need.
Custom CSS is applied only in your published site, so you will not see the truncation in the designer.
Line-Clamping
Demonstration
Use
wfu-truncate to apply truncation to a text element.Use a value of
1 to 5 to specify the number of lines.e.g.;
wfu-truncate = 3
Recently tested on Chrome ONLY.
Please double check your desired browsers to make sure the CSS works for your target audience.
See above for details.