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.
Text truncated to 3 lines…
wfu-truncate to apply truncation to a text element.
Use a value of
5 to specify the number of lines.
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://firstname.lastname@example.org/dist/css/webflow-html.css">
STEP 2 - Apply
wfu-truncate to your text elements
See above for details.