Remove Empty Paragraph With CSS

Glenn Blog Leave a Comment

Empty paragraphs between <p></p> tags can be a real nuisance in your code (especially WordPress) as they add empty white space. There are a number of jQuery methods to remove empty para tags such as:-

<script type="text/javascript">
jQuery(document).ready( function($) {

	// remove the empty p tags
	$('.entry-content p').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
        $this.remove();
});
});
</script>

But there’s a much simpler way to achieve this with CSS Only

Simply add the following CSS to your styles:-

p:empty {
display: none;
}

Bang the empty paragraphs are gone!

About the Author
remove empty paragraphs css Remove Empty Paragraph With CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.