2016-10-01 3 views
0

머리글에 잘린 (overflow: hidden) 텍스트를 완전히 표시하여 읽을 수있게 할 수 있습니까? 아무것도 읽을 수 있도록잘린 머리글 텍스트 표시

div:hover { 
    overflow: visible; 
    background-color: yellow; 
} 

같은 규칙은, 또 다른 하나를 통해 표시된 텍스트에 연결됩니다.

설명하기가 어렵지만 쉽게 볼 수 있습니다 : plunker. 크기 변경은 옵션이 아닙니다. 툴팁은 분명히 효과적 일지 모르지만, 나는 오히려 관입 적이라는 것을 알게된다.

부탁드립니다. 특정 div 콘텐츠가 완전히 표시되거나 잘리는 지 어떻게 알 수 있습니까?

+0

추가'높이처럼 스타일을 변경할 시도 할 수 있습니다 그것은 가능한 경우 : 자동; word-break : break-word;'div : hover'에서 작동합니까? – kukkuz

+0

@kukkuz [오히려] (https://plnkr.co/edit/ah4rU7G0uT3pbBPbrsKP?p=preview) 실제 테이블은 다소 크고 모든 것이 움직이며 이것은 다소 혼란 스럽습니다. – maaartinus

답변

0

table { 
    border-collapse: collapse; 
} 

th, td { 
    border: 1px solid grey; 
    width: 100px; 
    height: 36px; 
    position: relative; 
} 

div { 
    width: 100px; 
    height: 36px; 
    overflow: hidden; 
} 

div:hover { 
    overflow: visible; 
    background-color: yellow; 
    position: absolute; 
    display:block; 
    height: auto; 
    top: 0; 
    z-index: 2; 
}