Q17: Limit the Excerpt Length in Divi with CSS

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 ), 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.

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

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.

Michelle X