僅當其中的文本顯示容器

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

你可能想要刪除的垂直填充，和玩line-height。這樣，沒有任何內容，容器就不會有高度。

例如：

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

見本jsFiddle Demo

Answer 3

有一個CSS :empty class，觸發器而對象是空的。