범람하는 텍스트 만 숨기고 자식 범용 div는 넘칠 수 있습니까?

Question

목록과 같은 트리가있는 사이드 바를 구현하려고합니다. 트리의 각 요소가 한 줄만 채우기를 원합니다. 오버플로가없고 줄 바꿈/줄 바꿈이 필요 없습니다. overflow: hidden;은 좋은 해결책이 될 수 있지만, 또 다른 요구 사항이 있습니다. 각 줄에는 툴팁/팝업 오버 (부트 스트랩의 팝 오버)로 절대 div가 있습니다. 숨기거나 '클립'하지 않으려 고합니다. 층). 문제는 오버플로하는 경우 숨겨져 야 할 요소의 하위로 popover가 생성된다는 것입니다. 첨부 된 이미지와 일치하는 동작을 어떻게 얻을 수 있습니까?

예 :

Answer 1

는 팝 오버에 z-index를 사용해보십시오! :)

사용 및 정의 here을 참조하십시오.

뿐만 아니라이 예제를보십시오 : http://www.w3schools.com/CSSref/tryit.asp?filename=trycss_zindex

Answer 2

랩 (예 : <div> 또는 <span> A와) 다른 요소에서 텍스트의 각 줄 다음 그들에게 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; 
}