Truncate Text with Ellipsis
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.
NOTE: Custom CSS is applied only in your published site, so you will not see the truncation in the designer.
Demonstration
Demonstration
Text truncated to 3 lines…
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.
e.g.;
wfu-truncate = 3
Tested on Chrome ONLY.
Getting Started ( NOCODE )
STEP 1 - Add the Library
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
This is a CSS-only solution.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/dist/css/webflow-html.css">
STEP 2 - Apply wfu-truncate to your text elements
See above for details.