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 How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

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