是否可以隱藏溢出的文本，但不能溢出子絕對div？

Question

我正在試圖實現一個像列表樹一樣的邊欄。我希望樹中的每個元素只填充一行 - 不溢出，不換行/換行。一個overflow: hidden;可能是一個很好的解決方案，但還有另一個要求 - 每行都將有一個絕對div作爲工具提示/彈出窗口（引導程序的彈出窗口），我不想隱藏或「剪輯」（它假設在某個頂部層）。 問題是彈出是作爲元素的子元素生成的，如果溢出，需要將其隱藏。我怎樣才能實現與附加圖像匹配的行爲？

例子：

Answer 1

嘗試使用你的酥料餅z-index！ :)

查看用法和定義here。

嘗試這個例子中，同樣：http://www.w3schools.com/CSSref/tryit.asp?filename=trycss_zindex

Answer 2

裹在另一元件的每一行文本（如<div>或<span>）然後應用overflow: hidden給他們，而不是父。

您當前的：

<div style="container" style="overflow: hidden"> 
    My text 
    <div class="popup">My popup</div> 
    Some more text 
</div> 

你應該做的：

<div style="container"> 
    <div class="text" style="overflow: hidden">My text</div> 
    <div class="popup">My popup</div> 
    <div class="text" style="overflow: hidden">Some more text</div> 
</div> 

（記得要做到這一點在你的樣式表，不使用內嵌樣式）

Answer 3

孩子應該有切緣陰性並且不需要絕對顯示，因爲這樣它不會影響父文本溢出。

例子： http://jsbin.com/akivid/3/edit

<div class='out'> 
TEXT 
    <div class='in'>   
     <span class='triangle-left'></span> 
     TEXT 
    </div> 
</div> 

CSS：

.out{ 
    width:100px; 
    background-color:gold; 
    word-wrap: break-word; 
    padding:10px; 
} 
.in{ 
background-color:lime; 
    margin-right:-20px; 
    margin-left:20px; 
    width:40px; 
    float:right; 
    word-wrap: break-word; 
    position:relative; 
padding:5px; 
} 
.triangle-left { 
    position:absolute; 
    left:-15px; 
    top:10px; 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-right: 15px solid lime; 
    border-bottom: 10px solid transparent; 
}