Learn how to control excerpt length in Elementor using clean CSS code, without plugins or complex configurations

Elementor, Tools, Websites

Limit Post Excerpts to 2 Lines in Elementor

Elementor, Tools, Websites

Learn how to control excerpt length in Elementor using clean CSS code, without plugins or complex configurations

The Problem with Default Excerpts

Elementor’s default excerpt settings don’t always work reliably. Some posts display perfectly truncated excerpts, while others show full paragraphs that break your layout. This inconsistency happens because:

Custom excerpt lengths vary between posts
HTML formatting in excerpts interferes with truncation
Different themes handle excerpts differently
Elementor’s excerpt widget settings are limited

The solution? A simple CSS snippet that guarantees consistent 2-line excerpts across all your posts.

The Complete CSS Solution

This CSS code limits excerpts to exactly 2 lines and adds automatic ellipsis (three dots) when text is truncated:

.cutelement .elementor-post__excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.5em;
}

Step-by-Step Implementation

Step 1: Add the CSS Code

You have two options for adding this CSS:

Option A: WordPress Customizer (Recommended)

Go to Appearance → Customize
Click on Additional CSS
Paste the CSS code above
Click Publish

Option B: Elementor Custom CSS

Go to Elementor → Custom Code
Click Add New
Select CSS as code type
Paste the CSS code above
Set location to Body – End
Click Publish

Step 2: Apply the Custom Class in Elementor

Edit your page with Elementor
Select your Posts widget or Archive Posts widget
Go to the Advanced tab
Find the CSS Classes field
Type cutelement
Click Update

That’s it! Your excerpts are now limited to 2 lines with automatic ellipsis.

How the CSS Works

Let’s break down each CSS property and its purpose:

display: -webkit-box

Enables the flexible box layout needed for line clamping. This is a webkit-specific property that works across all modern browsers.

-webkit-line-clamp: 2

This is the magic property that limits text to exactly 2 lines. Change this number to display more or fewer lines (e.g., 3 for three lines).

-webkit-box-orient: vertical

Sets the box orientation to vertical, which is required for line-clamp to work properly.

overflow: hidden

Hides any text that exceeds the 2-line limit.

text-overflow: ellipsis

Adds the three dots (…) automatically when text is truncated. This is what Elementor uses by default.

max-height: 3em and line-height: 1.5em

These properties provide a fallback height calculation. If -webkit-line-clamp fails for any reason, the max-height ensures text won’t exceed 2 lines.

Why Use a Custom Class?

Using .cutelement as a custom class is crucial for several reasons:

Isolation: The CSS only affects elements with this class, preventing conflicts
Reusability: Apply the same styling to multiple widgets across your site
Maintainability: Easy to update or remove without affecting other elements
Specificity: Overrides default Elementor styles without using !important

You can use any class name you prefer. Some alternatives:

excerpt-2-lines
limited-excerpt
short-description
truncate-text

Customizing Line Count

Want to display more or fewer lines? Simply change the -webkit-line-clamp value:

For 3 Lines

.cutelement .elementor-post__excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    line-height: 1.5em;
}

For 1 Line

.cutelement .elementor-post__excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.5em;
    line-height: 1.5em;
}

Pro tip: Always update max-height when changing line count. The formula is: line-clamp × line-height = max-height

Advanced Variations

Different Line Counts for Different Devices

Show more lines on desktop, fewer on mobile:

.cutelement .elementor-post__excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .cutelement .elementor-post__excerpt p {
        -webkit-line-clamp: 3;
    }
}

@media (min-width: 1024px) {
    .cutelement .elementor-post__excerpt p {
        -webkit-line-clamp: 4;
    }
}

Multiple Classes for Different Lengths

Create multiple classes for different excerpt lengths:

/* 2 lines */
.excerpt-short .elementor-post__excerpt p {
    -webkit-line-clamp: 2;
    max-height: 3em;
}

/* 3 lines */
.excerpt-medium .elementor-post__excerpt p {
    -webkit-line-clamp: 3;
    max-height: 4.5em;
}

/* 4 lines */
.excerpt-long .elementor-post__excerpt p {
    -webkit-line-clamp: 4;
    max-height: 6em;
}

/* Common properties */
.excerpt-short .elementor-post__excerpt p,
.excerpt-medium .elementor-post__excerpt p,
.excerpt-long .elementor-post__excerpt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
}

Troubleshooting Common Issues

Excerpts Still Not Truncating

Possible causes and solutions:

Cache not cleared: Clear your browser cache and WordPress cache plugins
Wrong class name: Double-check spelling in both CSS and Elementor settings
CSS not loaded: Verify the CSS is actually added to your site by inspecting with browser dev tools
Higher specificity rule: Another CSS rule might be overriding yours. Add !important as last resort

Ellipsis Not Showing

Make sure you have text-overflow: ellipsis in your CSS. The three dots are added automatically by the browser when text is truncated.

Text Cut Off Mid-Word

This is normal behavior for -webkit-line-clamp. If you want to break only at word boundaries, add:

.cutelement .elementor-post__excerpt p {
    word-break: break-word;
    hyphens: auto;
}

Layout Breaking on Mobile

Adjust line-height and max-height for smaller screens:

@media (max-width: 767px) {
    .cutelement .elementor-post__excerpt p {
        line-height: 1.4em;
        max-height: 2.8em;
    }
}

Browser Compatibility

The -webkit-line-clamp property is widely supported:

Chrome: Full support (all versions)
Safari: Full support (all versions)
Firefox: Full support (Firefox 68+)
Edge: Full support (all versions)
Opera: Full support (all versions)
Mobile browsers: Full support on iOS and Android

The max-height fallback ensures compatibility even in older browsers that don’t support line-clamp.

Alternative Solutions

Using WordPress Excerpt Length Filter

If you want to control excerpt length globally via PHP, add this to your theme’s functions.php:

function custom_excerpt_length($length) {
    return 20; // number of words
}
add_filter('excerpt_length', 'custom_excerpt_length');

However, this controls word count, not visual lines, so CSS is still more reliable for consistent layouts.

Using Elementor Pro’s Read More Feature

Elementor Pro offers a built-in “Read More” option, but it doesn’t provide the same level of control as custom CSS.

Using a Plugin

Plugins like “Advanced Excerpt” or “Better Excerpt” can help, but they add extra code and database queries. The CSS solution is lighter and faster.

Best Practices

Test on multiple devices: Check how excerpts look on mobile, tablet, and desktop
Use consistent line-height: Keep the same line-height across your site for uniform appearance
Consider readability: 2-3 lines is optimal for most layouts. Too few lines and excerpts become useless; too many and they clutter the page
Update max-height when changing line-clamp: Always keep these values synchronized
Document your custom classes: Keep a list of custom classes and their purposes for future reference
Test with different content lengths: Make sure both short and long excerpts look good

Real-World Use Cases

Blog Grid Layouts

Perfect for keeping post cards uniform height in grid layouts where varying excerpt lengths would break the design.

Magazine-Style Homepages

Essential for featured post sections where space is limited and visual consistency matters.

Archive Pages

Keeps category and tag archive pages clean and scannable with predictable excerpt lengths.

Performance Considerations

This CSS solution is extremely lightweight:

No JavaScript required: Pure CSS means zero JavaScript overhead
No server processing: Doesn’t add PHP filters or database queries
Minimal CSS: Only a few lines of code
Native browser rendering: Browsers handle line-clamp efficiently

This approach has virtually no performance impact compared to plugins or JavaScript solutions.

Conclusion

Controlling excerpt length with CSS is the cleanest, most reliable solution for Elementor sites. By using a custom class like cutelement, you get:

Consistent 2-line excerpts across all posts
Automatic ellipsis without plugins
No conflicts with other site elements
Easy customization for different layouts
Zero performance impact

The combination of -webkit-line-clamp and a custom CSS class gives you complete control over excerpt display while maintaining clean, maintainable code. Simply add the CSS once, apply the custom class to any Elementor widget, and enjoy perfectly formatted excerpts throughout your site.