Truncate Text w/ Ellipsis

webflow-html

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.2/dist/css/webflow-html.css">

STEP 2 - Apply wfu-truncate to your text elements

See above for details.