Remove Empty Paragraph With CSS

Glenn Blog 0 Comments

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:-


&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready( function($) {

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

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

Simply add the following CSS to your styles:-

[css]
p:empty {
display: none;
}
[/css]

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 WordPress Web Developer, Front-end and 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.

Leave a Reply

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