Design

4 min

How to Truncate Text in Webflow Easily

Introduction

Approach	Method	Benefit
JavaScript (this tutorial)	CSS class script	Precise control by character count
Native Webflow CSS	text-overflow: ellipsis	Simple, no code, truncates by line
CSS -webkit-line-clamp	Via CSS embed	Limits to N lines without JS

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to easily truncate text in Webflow.

Truncating text can be super useful for a few reasons, especially when you want to keep your Hub pages consistent, like blog pages, guides, articles, and more. It helps keep the layout consistent no matter how long your text is (see image below).

Here’s how you can do the same in under 5 minutes

‍

1. Add a class to the text you want to truncate

In my example, I use the class "slice"

‍

2. Add this code to your project

You can add this code in an embed or directly in the body of your page

Make sure you replace "slice" with your CSS class

good to know

var elements = document.getElementsByClassName('slice');

‍

3. Adjust the character length to the value you want

All you need to do is replace the 64 in the code above with your own value. It’s that simple!

‍

good to know

For a 100% JavaScript-free solution, use overflow: hidden + text-overflow: ellipsis + white-space: nowrap (one line) or -webkit-line-clamp (multiple lines). More performant than JS.

4. Publish and you’re done!

That’s all there is to it 😎

How to Truncate Text in Webflow Easily

Introduction

1. Add a class to the text you want to truncate

2. Add this code to your project

var elements = document.getElementsByClassName('slice');

3. Adjust the character length to the value you want

For a 100% JavaScript-free solution, use overflow: hidden + text-overflow: ellipsis + white-space: nowrap (one line) or -webkit-line-clamp (multiple lines). More performant than JS.

4. Publish and you’re done!

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials