Limit Text Lines Preview Length

Limit Text Lines Preview Length

This code limits the amount of text shown in a preview, and ends the text with an ellipsis.

Add this code to the <head> section of your page or site settings.

.text-class {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;

Change the class name to the name that you're using for the text you want to limit.

Download Assets
See an Example Website

Other Code Snippets

Learn the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.