How to Control Text Line Count with CSS?

When using Elementor Loop Items to create product listings, I often use CSS to limit the number of lines in a text excerpt. This helps maintain a clean and consistent layout.

If you’re using the native excerpt element, you can usually control the number of words directly.

However, if you’re displaying custom field content using a basic Text widget, you won’t find any built-in option to limit the content length.

In such cases, I use the following CSS to limit the number of visible lines:

Example: Limit Text to 2 Lines with Ellipsis
Go to the Text widget > Advanced tab > Custom CSS and enter this code:

selector{ display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2;/*超过2行自动截断并显示省略号*/ -webkit-box-orient: vertical; }

After saving, the text will display up to 2 lines, and any content beyond that will be truncated with an ellipsis (…).

This technique is great for keeping your product grids or blog excerpts tidy and visually appealing.

Similar Posts