[CSS3] text-overflow 속성

 

 

[CSS3] text-overflow 속성

 
박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다.

 

주의 : text-overflow 속성은 다음 2가지를 모두 충족할 경우에만 적용됩니다.

 

1. overflow 속성값이 hidden, scroll, auto 일 때(visible 제외)

 

2. white-space:nowrap (텍스트 길어도 줄바꿈 되지 않음) 또는 텍스트가 다음 줄로 이동하지 않는 비슷한 경우

 

 

overflow 속성 (overflow: visible, hidden, scroll, auto 차이)

 

white-space 속성(pre, pre-wrap, pre-line 차이)

 

 

▶ 브라우저 지원

 

ie6.0+, chrome 4.0+, firefox 7.0+, safari 3.1+, opera 11.0+

 

 

▶  text-overflow 속성값

 

clip | ellipsis | string | initial| inherit

 

clip 기본값. 텍스트를 자름.

 

ellipsis 잘린 텍스트를 생략 부호(...)로 표시함.

 

string 잘린 텍스트를 지정한 문자열로 표시 예: div{ text-overflow: "---"; }
        * 하지만 string의 경우, 현재 지원하는 브라우저가 없음*

 

 

 

html 작성 예

<h3>text-overflow: clip</h3>
<div id="one">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>

<h3>text-overflow: ellipsis</h3>
<div id="two">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>

<h3>text-overflow: ellipsis2</h3>
<div id="three">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>

 

css

div{width:300px; height: 30px;background-color:yellow; border:1px solid black;padding:5px;}
#one{overflow: hidden;white-space: nowrap; text-overflow:clip;}
#two{overflow: scroll; white-space: nowrap; text-overflow: ellipsis;}
#three{overflow: auto;white-space: nowrap; text-overflow: ellipsis;}

 

 

▶실행화면

 

다운받아 실행해 보세요~ text-overflow.html

 

 

 

 

overflow-x / overflow-y 속성

 

overflow 속성 (overflow: visible, hidden, scroll, auto 차이)