Truncate Text w/ Ellipsis ❺

Line-clamp your plain-text content to a maximum number of lines, to keep your layout tidy.

Overview

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 yet built into the Webflow designer.

So, here’s a solution that gives you what you need.

SA5's external CSS libs are only loaded in your published site, so you will not see the truncation in the designer.

Demonstration

Line-Clampingwebflow-smart-elements.webflow.io

Demonstration

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

Usage Notes

Add the SA5 Library

First, add the library as detailed in Quick Start.

I want this text element to be truncated to N lines

Add the wfu-truncate custom attribute your element. If it exceeds the line count you specify, you'll see an ellipses ( ... ) at the point of truncation.

Use a value of 1 to 5 to specify the number of lines.

e.g.;

wfu-truncate = 3

Truncation will only appear in the published site, not in the designer.

Questions? Feature Requests?

Visit the SA5 forum link at the top of this page.