[펌] css 말줄임 처리...

[출처] http://html.nhndesign.com/parkbur/textyle/13644

1. bytes check vs overflow:hidden

bytes check - 가장 널리 사용되는 방법입니다.

 

백엔드 개발에서 해당 엘리먼트안에 byte를 체크하여 말줄임표시를 합니다.

단점으로는 1byte 문자중 문자의 가로폭이 넚은 특수문자나 W와 가로폭이 좁은 i등의 가로폭 차이로

해당 영역보다 적은 영역에서 말줄임이 표시되거나 해당 영역을 넘쳐서 말줄임이 표시될 수 있다는 점입니다.

또한 2bytes 인 한글과도 가로폭의 차이 심해 위와 같은 현상이 빈번하게 발생합니다.

 

WWWWWWWW... 8bytes

대한민국...               8bytes

||||||||...                     8bytes

 

overflow:hidden

그래서 복잡한 개발작업을 거치지 않고 넘치는 문자를 그냥 숨기는 경우에는 overflow:hidden 방법을 사용합니다.

이 방법을 위해서는 inline 엘리멘트를 block 엘리먼트로 변환하여야 합니다.

단점으로는 일정영역을 넘치는 경우 숨김 처리를 하므로 글자의 중간이 잘릴 수 있습니다.

 

또한 위 두가지 방법이 혼용되어 사용되는 경우도 있습니다.

혼용이 된다 하더라도 위에 설명한 단점들이 보완되는것은 아닙니다.

 

2. Text-overflow:ellipsis

 

이런 불편한 사실을 파악한 호콘 비움 리(?)는 text-overflow-mode를 제안합니다.

글자의 넘침을 CSS box 모델을 기준으로 CSS로 쉽게 구현할 수 있도록 CSS 3.0에 제안합니다.

 

해당 속성을 간단히 살펴보면

 

2003년도 처음 CSS Text3 모듈에 처음 정의(text-overflow-mode)된 후 각 브라우저 밴더들이 지원을 시작하여

FF를 제외한 나머지 브라우저들은 해당 속성을 지원합니다.

 

현재 CSS3 Text 3 WD에서는 text-overflow로 정의하고 있습니다.

 

clip | ellipsis | string 

 

3가지 값을 가지며 default는 clip 입니다.

block 엘리먼트에만 적용되며 IE6을 위해 width속성이 필요하며,

오페라는 브라우저 한정속성(v 10.7부터 정식지원)으로 지원하고 있습니다.

 

(새롭게 알게된건 string 도 text-overflow의 value라는 점입니다. 마침표를 기준으로 줄바꿈을 할 수도 있네요.)

 

 

CSS 적용 예

 

p{

white-space: nowrap;
width: 100%;                   /* IE6 needs any width */
overflow: hidden;              /* "overflow" value must be different from "visible" */ 
-o-text-overflow: ellipsis;    /* Opera under 10.7 */
text-overflow:  ellipsis;    /* IE, Safari */
}

 

Cross Browsing

 

다만 이 속성도 브라우저마다 표현하는 모양과 기준이 상이합니다.

 

네이버 서비스에 일반적인 12px, 돋움을 선언한 경우 아래와 같이

말줄임 표시의 글자의 세로중앙이나 세로아래쪽에 표시됩니다.

 

 

 

또한 글자를 11px, 돋움으로 선언한 경우 아래와 같이

IE8, Chrome, Safari의 2번째 말줄임 표시가 크게 다른 말줄임보다 크게 나타납니다.

 

또한 자간을 줄이더라도 말줄임 표시의 자간은 줄지 않습니다.

 

마지막으로 IE는 말줄임처리된 부분을 마우스로 드래그하면 ... 으로 표시되기전 내용이 나타납니다.

 

FF에서의 말줄임

 

FF 에서는 text-overflow 속성을 지원하지 않고 있습니다.

FF가 지원해주면 좋을텐데...

4.0 베타 릴리즈 노트에도 역시나 해당 내용은 없고, 지원예정이라는 말만...

울며 겨자먹기로 XUL Description 엘리먼트의 crop 속성을 이용하는 방법이 있습니다.

단, 이 방법은 스크립트 지원되지 않는 환경에서는 적용되지 않습니다.

또한 해당 엘리먼트에 자식 엘리먼트가 위치할 경우 적용되지 않습니다.

감사합니다.