Copied!
It's on your clipboard.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Wireframes
No items found.
Basics
Oops, nothing here...
Scroll
Esc
Overview
This snippet shortens overflowing text by clamping it after a set number of lines and adding an ellipsis (…) at the end. It keeps long content tidy and maintains clean layouts without breaking design consistency.
Documentation
Code Setup
Walkthrough
Copy To Elementor
Option A(1): Multi-line Text Trim
Add this code with a snippets plugin in <head>, or place it in Element CSS, Page CSS block, or Site Settings. Apply the .ou-multiline-break custom class on any element where you want multi-line ellipsis.
.ou-multiline-break {
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}Option A(2): Multi-line Text Trim with Selector Tag in Elementor
Add this code inside the Custom CSS field of an element in Elementor. The selector tag automatically targets only that specific element, so the style won’t affect others.
selector {
display: -webkit-box;
-webkit-line-clamp: 1; /* number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Absolutely Codefree
If you were expecting some fancy snippet, sorry. This one runs just fine on its own.
C’mon, You Got This
Do we really need to spell this one out? It’s as straightforward as it gets.
