css - 仅当容器内有文本时才显示容器

Question

我在网页顶部有一个容器，用于动态显示状态消息。默认情况下，容器是空的，但由于红色背景和填充，它仍然可见。

仅当使用 CSS 里面有文本时，如何才能使该容器可见？

#status_container {
  width: 240px;
  padding: 6px 16px;
  margin: 5px 8px;
  height: auto;
  background: red;
}
<div id="status_container"></div>

Answer 1

相反，将样式应用于子元素。然后使用 CSS 显示该子元素（如果存在），如下所示：

.status_container {
  overflow: hidden;
}

.status_container > p {
  padding: 6px 16px;
  margin: 5px 8px;
  background: red;
}

<div class="status_container">
    <p>Upload successful.</p>
</div>

设置overflow: hidden在父级上，以便子级的边距p仍然可见

看到这个jsFiddle空的和完整的消息。

Answer 2

有一个CSS :empty 类，当对象为空时触发。

Answer 3

您可能想要删除垂直填充，并使用line-height. 这样，没有任何内容，容器就没有高度。

例如：

#status_container {
    width: 240px;
    padding: 0 16px;
    margin: 5px 8px;
    height: auto;
    background: red;
    line-height: 30px;
}

看到这个jsFiddle Demo