CSS 判断空标签

现在很多文章发布系统用的都是富文本编辑器,这样在编写内容时难免会出现空标签,如果不处理,最终就会影响到页面的排版。

对于这个问题,我们可能会通过正则匹配来处理,但是现在有更简单的办法,那就是通过 CSS3 中的 :empty 选择器来判断。

下面来看一下代码示例:

<div class="content">
<p>Hello World!</p>
<p>Hello World!</p>
<p></p>
<p>Hello World!</p>
<p></p>
<p>Hello World!</p>
</div>

这段 HTML 代码中主要由 p 标签构成,但是有几个空标签,由于设置了外边距及行高,如果不处理的话页面中就会出现过大的空白间隙。

p {
margin: 10px;
width: 200px;
min-height: 20px;
}

p:empty {
display: none;
}

通过 :empty 选择器可以取到空标签,然后我们再对其进行样式处理,示例中我们把空标签都隐藏掉了,这样就解决了排版问题。

相关文档: