아티클

CSS 말줄임 처리의 브라우저 호환성 문제

2011-04-06 11:50:45

말줄임 처리 방식의 이해

말 줄임 처리 방식은 크게 두 가지로 나뉠 수 있습니다. 첫째는 웹 개발이나 스크립트 단에서 글자수를 기준으로 자르는 방법이고, 둘째는 CSS를 이용해 정해진 너비 값을 기준으로 자르는 방법입니다. CSS를 이용한 방법은 구현 방법이 간단하고 성능에 영향을 주지 않아 글자수를 기준으로 자르는 방법보다 더 선호되고 있는 편입니다.

CSS를 이용한 말 줄임 처리

그림 1 CSS를 이용한 말 줄임 처리 예
1.gif  

그림 1은 CSS를 이용한 말 줄임 처리의 예 입니다. 이를 구현하기 위한 주요 CSS 코드는 다음과 같습니다.

a{display:block;overflow:hidden;width:145px;white-space:nowrap;text-overflow:ellipsis;-o-text-overow: ellipsis;-moz-binding:url(js/ellipsis.xml#ellipsis)undefinedundefinedundefined}

실제로 말 줄임 처리를 하는 것은 ‘text-overflow’ 속성입니다. IE와 Webkit 계열의 브라우저(Safari, Chrome)에서 정식 지원하고 있으며, Opera에서 사용하기 위해서는 ?o- 라는 접두사를 붙여주어야 합니다. Firefox는 text-overflow 속성을 지원하지 않습니다. 그렇기 때문에 ?moz-binding이라는 Firefox 전용 속성을 이용하여 넘치는 텍스트를 자르고 말 줄임 처리 문자(…)로 치환해주는 XUL(XML User Interface Language)을 이용한 XML 파일을 링크시켜서 브라우저간 호환성을 유지하고 있습니다.

Firefox 4.x부터 XUL 지원 범위 축소

XUL이 가지고 있던 보안상의 문제로 인해 Firefox 4.0부터 XUL을 사용할 수 있는 범위가 축소되었으며, 말 줄임 처리를 위해 사용되던 XUL은 지원되지 않습니다. 따라서 Firefox 4.0으로 업데이트를 한 사용자의 경우, 그림 2와 같이 끝 문자가 잘려 보이는 현상을 목격하게 됩니다.

그림 2. Firefox 4.x에서 확인한 말 줄임 처리
 2.gif

해결 방법

Firefox 4.x 사용자가 CSS로 말 줄임 처리한 부분을 버그로 인식하지 않기 위해서는 다음과 같은 방법으로 해결할 수 있습니다. 이 방법은 별도의 개발 공수 없이  CSS 수정만으로도 가능한 방법입니다.
  • 타 브라우저에서는 기존과 동일한 방식으로 말 줄임 처리하며, Firefox의 경우에만 말 줄임 처리 문자(…) 표기하지 않음
CSS 코드는 다음과 같이 변경됩니다. 높이 값을 지정해야 하는 이유는 Firefox에서 넘치는 글자가 줄 바꿈되었을 때 둘째 줄부터는 보이지 않게 하기 위함입니다.

a{display:block;overflow:hidden;width:145px;height:14px;text-overflow:ellipsis;-o-text-overflow:ellipsis}
a,x:-moz-any-link,x:default{white-space:normal;word-wrap:break-word} /* Firefox 에서 줄 바꿈이 가능하도록 변경 */
*+html a{white-space:nowrap} /* 위 행이 IE7에도 적용되므로 IE7에만 줄 바꿈이 불가능하도록 다시 복원 */

위 코드를 적용한 후 Firefox 4.x 에서 페이지를 확인하면 그림 3과 같이 보입니다. 말 줄임 처리 문자(…)는 없지만 이전의 글자 잘림 현상은 더 이상 발생하지 않습니다.

그림 3 대안 코드 적용 후 Firefox 4.x에서의 화면
 3.gif

Reference



조회수24656
댓글 0
댓글을 작성하려면 해주세요.