[text] CSS - text-overflow 속성 ★ - 영역 이탈 글자 처리 (= text-overflow속성 = 텍스트오버플로속성)

1. text-overflow 속성 ★ - 너비 벗어난 글자 처리
2. text-overflow 정의
3. text-overflow 구문
4. 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.

아래 속성과 함께 사용.

• white-space: nowrap;
• overflow: hidden;

 

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>

 

결과보기