Follow us

Limit the Excerpt Length in Divi with CSS | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

I have previously written about how to change the excerpt length of Divi blog posts using PHP and creating your own custom module. However, with the continuous updates, like many things involving editing the modules, this method no longer works.

It is possible to make it work with some changes and I was considering updating that recipe but to be honest, it’s just going to break again when Elegant Themes change something else, and I know editing PHP can sometimes be daunting for beginners.

So with that in mind, let’s bypass all the complex coding and use a purely CSS way to limit your excerpts in the Divi blog module which is not only future proof (or should be wink ), it works across all browsers as it uses just three CSS properties which are supported across the board!

It also results in a pretty damn neat and tidy layout.

So let’s get cooking!

Ingredients

 

The Divi Theme from Elegant Themes

 

Cooking time

 

Literally 2 minutes!

 

Preparation

 

 

For our prep we simply need to add a Blog module to our page. You can use the Grid or Fullwidth layout as this works with both formats.

Once you have added your Blog module and selected the settings you want displayed, click on the Design tab. You can use any settings you like here but there is one we need to define and make a note of and that is the line height for the body text. Set it to something that works with the font and font size you are using. I find 1.5em works well.

Limit the excerpt length in Divi with CSS

 

Then click on the Advanced tab and give the module a CSS class of ds-limit-excerpt then Save & Exit.

Limit the excerpt length in Divi with CSS

 

Method

 

Now, let’s add our CSS. This is all you need:

.ds-limit-excerpt .post-content p {
    display: block;
    max-height: 3em;
    overflow: hidden;
}

 

We are doing three things here:

1 – We are setting the excerpt to display as a block element, you don’t even need this and can leave it out. However, if you are going to be showing the ‘read more’ link and want to style it like a button, you are probably going to need some extra space above it and by setting the excerpt as a block element, we can add a bottom margin to give the read more link the extra space it needs.

2 – We set the maximum height of the excerpt as a multiple of our line height. So, if we set the line height in the module to 1.5em, and we want to display 2 lines of our excerpt, then we multiply the line height by the number of lines : 1.5em * 2 = 3em. Want four lines? No problem, 1.5em * 4 = 6em. And so on.

3 – We set the overflow to hidden, this is what hides the part of the excerpt we don’t want displayed.

Copy the CSS and paste it into your child theme stylesheet or Divi theme options custom CSS box and that’s it!.

The great thing about this is you can even duplicate that CSS, change the class and apply it to another blog module and have a completely different excerpt length. Cool eh?

And that’s it, pretty simple eh? 

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!