Limit total tags in the_content

I was looking into this because all of the text was not showing on my slider, and the slider had a height set with overflow: hidden. I didn’t think there was a simpler solution than to create a filter for the_content until I stumbled across this one…

It’s a css solution 🙂 All I am doing is using nth-child to display the first five items, then hide the rest:

#main p:nth-child(1n+6) {
    display: none;
}

This is a great solution, because I can use media queries to change the amount I show based on screen size, that way I don’t have to have one magic number and it’ll look good on large or small screens.

Hopefully this helps someone else trying to do the same thing.

Thanks,
Josh