목차
text-overflow 속성 ★ - 너비 벗어난 글자 처리
text-overflow 정의
text-overflow 구문
text-overflow 예제 - hover 시, 숨겨진 텍스트 보기 ★
text-overflow 속성 ★ - 너비 벗어난 글자 처리
<style>
div.a {
white-space: nowrap;
width: 120px;
overflow: hidden;
text-overflow: clip;
border: 1px solid red;
}
div.b {
white-space: nowrap;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
div.c {
white-space: nowrap;
width: 120px;
overflow: hidden;
text-overflow: "----";
border: 1px solid red;
}
</style>
<h2>text-overflow: clip (기본값):</h2>
<div class="a">홈짱닷컴 Homzzang.com</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">홈짱닷컴 Homzzang.com</div>
<h2>text-overflow: "----" (사용자정의 문자열 : Firefox만 작동):</h2>
<div class="c">홈짱닷컴 Homzzang.com</div>
결과보기
text-overflow 정의
지정 너비를 넘는 텍스트 처리 방법 지정.
(예) 자르거나 말줄임표 붙이거나 사용자정의 문자열 지정 가능.
1.
기본값: clip
상속여부: X
애니효고: X
CSS버전: CSS3
JS구문: object .style.textOverflow ="ellipsis"
2.
아래 속성과 함께 사용.
3.
주요 최신 브라우저 모두 지원 .
text-overflow 구문
selector {text-overflow: 속성값;}
[속성값]
clip
텍스트 자르고, 잘린 텍스트에 접근 불가.
ellipsis
줄임표 ( "...") 추가해 짤린 텍스트임을 표시.
string
사용자정의 문자열로 잘린 텍스트임을 표시. (Firefox만 지원)
initial
이 속성의 기본값으로 자동설정.
inherit
부모요소의 속성값 상속.
text-overflow 예제 - hover 시, 숨겨진 텍스트 보기 ★
<style>
div.hz {
white-space: nowrap;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
div.hz:hover {
overflow: visible;
}
</style>
<div class="hz">홈짱닷컴 Homzzang.com</div>
결과보기
주소 복사
랜덤 이동