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一个空的和完整的消息。