CSS

게시글 'overflow 와 text-overflow 의 차이와 사용예'에 대한 정보
overflow 와 text-overflow 의 차이와 사용예
등록일 2009-12-26 조회 4,299
text-overflow 는 그 단어 뜻대로 text 가 overflow, 즉 넘칠때의 취하는 액션을 담당하게 됩니다.
overflow 속성이 값을 가지고 있을때, 예를들어 overflow: hidden; 등일때 text-overflow 가 적용이 가능케 됩니다. 블락엘리먼트에 모두 적용 가능합니다.


overflow 는 단순히 글자가 엘리먼트의 크기에 영향을 주지 않도록 예방하는 정도였다면 text overflow는 보이는 텍스트 이상의 글이 들어있음을 알리는 기능입니다.
 엘리먼트 크기 이상의 글이 있다면 뒤에 “…” 으로 표기됩니다.
text-overflow-mode

text 가 엘리먼트 보다 많을때 이하의 값을 정해줄수 있습니다.


clip, ellipsis, ellipsis-word, inherit


clip 은 단순히 엘리먼트 테두리에서 글자가 잘리는 것이고
ellipsis 는 테두리에 닿을 정도가 되면 ‘text-overflow-ellipsis’ 속성에서 정해준 string 이 표기가 됩니다.
기본값은 “…” 입니다.
ellipsis-word 는 위의 ellipsis와 비슷하지만 테두리에 닿을 정도가 되면 아무곳에서나 자르는것이 아니라 마지막 단어에서 자르게 됩니다.

text-overflow-ellipsis

text-overflow-mode 의 값이 ellipsis 일때 들어갈 string 을 정해줍니다.
url 을 지정해 줄수도 있으므로 이미지를 삽입할수도 있겠죠.
대신 string 이 들어갈때는 엘리먼트의 폰트크기와 같습니다.



<ellipsis-end> uri, <ellipsis-after> uri, inherit

세가지 값을 갖습니다. 말씀드린데로 uri 는 이미지의 경로를 나타냅니다.
<ellipsis-end> 는 각각의 line 이 잘릴때 들어가는 string 을 지정합니다.
<ellipsis-after> 는 text 가 잘릴때 들어가는 string 을 지정하며 ellipsis-end 와 ellipsis-after 가 같은곳에 표기되게 될 경우 ellipsis-after만 표기됩니다.
text-overflow


단축된 속성입니다.
순서는 text-overflow-mode 다음 text-overflow-ellipsis 순서대로 오게됩니다.


예제
현재 이 부분을 지원하는 브라우저는 오페라와 webkit 입니다.
오페라에서 오페라 전용인 -o-text-overflow 로 지원을 하구요.
Webkit 은 부분적으로 지원합니다.

“오늘도 즐거운 하루를 보내시기 바랍니다”
라는 문구를 작은 엘리먼트안에 넣으면서 보겠습니다.

<div id="example1">오늘도 즐거운 하루를 보내시기 바랍니다</div>
<div id="example2">오늘도 즐거운 하루를 보내시기 바랍니다</div>
<div id="example3">오늘도 즐거운 하루를 보내시기 바랍니다</div>

html 부분입니다. css 를 지정하면

#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }