• Q&A
  • 회원가입
  • 로그인

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

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.

IE6 이상 주요 최신브라우저 모두 지원.

단, 사용자정의문자열 속성값은 Firefox만 지원.

 

 

 

text-overflow 구문

 

text-overflow: 속성값;

 


[속성값]

 

clip

텍스트 자르고, 잘린 텍스트에 접근 불가.

 

ellipsis

줄임표 ( "...") 추가해 짤린 텍스트임을 표시.

 

string

사용자정의 문자열로 잘린 텍스트임을 표시. (Firefox만 지원)

 

initial

이 속성의 기본값으로 자동설정.

 

inherit

부모요소의 속성값 상속.

 

 

 

text-overflow 예제 - 숨겨진 텍스트 보기

 

<style> 

div.a {

  white-space: nowrap; 

  width: 120px; 

  overflow: hidden;

  text-overflow: ellipsis; 

  border: 1px solid red;

}

div.a:hover {

  overflow: visible;

}

</style>

<div class="a">홈짱닷컴 Homzzang.com</div>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012