Skip to Main Content

How to Fix the Post Excerpt Length not working In the Elementor Post Widget with CSS

In this tutorial, I am going to show you how to fix the post excerpt length not working in Elementor post widget's with the help of CSS

Post Excerpt Length Not Working in Post Widget

UPDATE: Today (11the May 2022) Elementor Pro released version 3.7 which includes the feature to “Apply to custom Excerpt” This fixes the excerpt length issue.Excerpt length issue

The Excerpt Length in the post widget’s layout panel does not match the number you put in the field.

It is quite frustrating and leaves a huge space in between the content when you disable the masonry option.

Excerpt Length is not working in Post widget even though if you applied it

This happened to my blog before and now it is fixed with the help of CSS.

I want to show you how I did it step by step

The applied excerpt length is not working in the Elementor  post widget

This happens when you disable the Masonry effects

After adding the CSS, it fixed the issue

equal height is achieved with some CSS

You can see that I am not the only one with this issue. See it for yourselves in GitHub.

Here is the step-by-step tutorial on how to fix the Excerpt Length issue in the post widget with the help of CSS:

Provide CSS class to the post widget

  1. Click the Post widget handle and navigate to the Advanced tab-

Click the pencil icon to edit the post widget

  1. Give CSS class to the post widget as “line-height”

CSS class to Post widget- Advanced panel

Add Custom CSS to fix the excerpt length issue

We will use the -webkit-line-clamp CSS property to limit the contents to the specified number of lines.

The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.

It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.

In most cases you will also want to set overflow to hidden, otherwise the contents won’t be clipped but an ellipsis will still be shown after the specified number of lines.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

On the bottom of the panel, you will find Custom CSS, and there add this CSS.

With LIne-clamp CSS property we limit the length of the lines

This CSS only works with post-excerpt

    
        
/*
    * This CSS only works with post excerpt
    * Adjust the line-clamp integer value.
    * Require Browser prefix to work. 
    * You can use the selector but using CSS class is much better
*/

.line-height .elementor-post__excerpt,
.line-height .elementor-post__excerpt p,
.line-height .elementor-post__excerpt a p{
 -webkit-line-clamp: 3;     
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    

Compatibility

When we use new CSS property, we often ask whether it is going to be compatible with the majority of the browser vendors but it turns out it supports over 95% globally which is excellent and safe to use according to Can I Use and MDN. 

  1. Can I use
  2. MDN Article

MDN shows 96% supports
Can I use Browser Compatibility check passes over 97% global use

Hope it helps.

Cheers

Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me

Leave a Reply

Your email address will not be published. Required fields are marked *