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.



Usage Notes

wfu-truncate attribute

Use wfu-truncate to apply truncation to a text element.
Use a value of 1 to 5 to specify the number of lines.
wfu-truncate = 3
Recently tested on Chrome ONLY. Please double check your desired browsers to make sure the CSS works for your target audience.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply wfu-truncate to your text elements

See above for details.