눈에 띄는 오버플로가 있더라도 상대적으로 배치 된 텍스트가 잘립니다.

Question

예약 웹 응용 프로그램을 만들고 색상 블록을 사용하여 가용성을 나타냅니다. 배경색이 빈 div를 사용하고 있습니다. 이제 상대 위치로 중첩 된 div를 사용하여이 블록 위에 레이블을 지정하려고합니다. 문제는 블록의 오버 플로우 속성이 visible으로 설정되어 있어도 label div의 텍스트가 잘리는 것입니다.

이에 대한 나의 CSS는 다음과 같습니다

.om-wrap{ 
    position: relative; 
    top: 18px; 
    width: 100%; 
    overflow: auto; 
    overflow-y: visible; 
    margin: 0 auto; 
    white-space: nowrap 
} 
.time-end{ 
    position: absolute; 
    right: 0; 
} 
.time-start{ 
    position: absolute; 
    left: 0; 
} 
.slot{ 
    position: relative; 
    left:10px; 
    display: inline-block; 
    min-width: 20px; 
    width: 20px; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    margin-bottom: 10px; 
    padding: 0px; 
    font-size: 18px; 
    overflow: visible; 

} 
.slot:first-of-type{ 
clear:both; 
} 
.slot-avail{ 
    background-color: green; 
} 
.slot-break{ 
    background-color: yellow; 
} 
.slot-full{ 
    background-color: red; 
} 
.slot-wrap{ 
    clear: both; 
    font-size: 0px; 
    overflow: visible; 
} 
.om-label{ 
    position: relative; 
    top: -12px; 
    left:-10px; 
    text-align: center; 
    overflow: visible; 
} 

그리고 HTML은 다음과 같이 포맷 : http://jsfiddle.net/GknLH/

내가 검색 한 : 나는 여기 JS 바이올린을 만들었습니다

<div class="om-wrap"> 
    <div> 
     <div class="time-end">&nbsp;</div> 
     <div class="time-start">&nbsp;</div> 
    </div> 
    <div class="slot-wrap"> 
     <div class="slot slot-full" ><div class="om-label">19:00</div></div> 
       <div class="slot slot-full" ><div class="om-label">19:00</div></div> 
       <div class="slot slot-full" ><div class="om-label">19:00</div></div> 
       <div class="slot slot-full" ><div class="om-label">19:00</div></div> 
       ... 
     </div> 
</div> 

이것에 대한 해결책을 찾기위한 인터넷이지만, 단순한 이슈 인 것으로 보이는 단일 포럼 게시물을 찾을 수조차 없기 때문에 나는 틀린 말로 표현했을 것입니다. 따라서 이것이 중복되면 사과드립니다.

Answer 1

.om-wrap의 경우 overflow: auto;을 제거해야합니다.

업데이트를 확인하십시오. DEMO