태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2007.09.19 13:03
text-overflow

소개해드릴 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; }

'웹표준 > CSS' 카테고리의 다른 글

postion  (1) 2007.09.21
border-style  (0) 2007.09.20
text-overflow  (0) 2007.09.19
cursor 정리  (2) 2007.09.19
Display type 설정  (0) 2007.09.19
주요 스타일시트 속성  (0) 2007.09.19
Posted by 고시랑

티스토리 툴바