css 말줄임 처리

말줄임 처리는 대부분 서버 개발자가 처리한다.

하지만 글자의 크기(ex: A, 1, 가 ...) 로 문자를 잘라 ... 처리를 할 수 없으므로 글자 수로 캐치하여 자른다.

이 때에는 제각각 들쑥날쑥 사이즈가 나타나게 되어 보기도 안좋을 뿐더러

모바일에서 가로/세로 로테이션을 할 시 가로에서 옆에 빈영역을 뿜기도한다.

성능에도 문제없고(DB 단에서 글자를 잘라야할 지, view 단에서 글자를 잘라야 할지에 대한 성능 이슈)

간단하게 css 로 처리할 수 있으므로 편리하다

여기서 쓰이는

white-space: nowrap; 은 웹표준이며 text-overflow: ellipsis; 는 웹표준이긴 하지만 css3 속성이다.

IE6, IE7, IE8, 크롬, 오페라(10.7 이상에서만 지원됨), 사파리는 정상작동되며

(오페라에서는 -o-text-overflow: ellipsis; 로 사용가능하다)

Firefox 는 현재 지원하지 않는다.(작성일 기준으로 최신버전인 Firefox6에서도 작동하지 않음)

크로스브라우징을 위해서는 핵을 사용해야 하며 두가지의 처리법을 가질거라 본다.

아래의 방법으로 3.x이하버전과 4.x 이상버전의 호환성을 맞출 방법은 아직은 모르겟다.. 음...
아래 것으로 실행한다면 ... 은 나오지 않고 해당 영역만큼 문장은 잘려나오지만 추후
text-overflow: ellipsis; 를 지원할 때에는 어떻게 처리해야 할지.. 흠

참고 : http://html.nhndesign.com/blog/37677

1. Firefox 3.x 버전에서는 XUL 을 사용하여 Firefox에서 정의한 속성을 사용가능했다.
    허나 4.x 버전부터 보안상의 문제로 XUL의 사용범위를 최소화하여 현재 4.x 버전 이후로는 XUL 은 사용이 불가능하다.

2. Firefox 4.x 버전 이상부터는 말줄임말이 되지 않으므로 Firefox 에서만 단어가 깨지지 않도록 처리하여 잘라내는
    방법이다. 추후 최신버전에 적용이 된다면, text-overflow: ellipsis; 로 사용하면 된다.