[펌] [CSS] text-overflow:ellipsis 를 FireFox 에서 사용하기

[출처] http://kais.tistory.com/96



제목이나 내용이 긴 경우 뒷부분을 잘라서 말줄임표 ... 로 표시하는걸, PHP 나 자바스크립트로 잘라서 하다가 이제는 CSS text-overflow 를 이용하는 경우가 많습니다. text-overflow 속성의 자르기(clip) 와 말줄임표(ellipsis) 중 ellipsis 를 사용해서 문자열을 잘라낼 수 있습니다.
이 속성을 사용하기 위해서는 overflow 와 white-space 를 아래처럼 지정해 주어야 합니다.

view source

print?

.ellipsis {

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

인터넷 익스플로러(Internet Explorer, IE) 에서는 지원을 하지만, 파이어폭스(FireFox)는 text-oveflow 에 ellipsis 값을 줘도 clip 처럼 작동합니다. FireFox 에서 말줄임표(ellipsis)를 넣으려면 XUL description 요소를 이용해서 할 수 있습니다. CSS 에서 XBL 바인딩을 지원하기 때문이 이를 통해 XML 을 호출하게 됩니다. 자세한 코드는 아래와 같습니다.

1. 아래 코드를 ellipsis.xml 파일로 저장합니다.

   view source

   print?

   <?xml version="1.0"?>

   <bindings

   xmlns="http://www.mozilla.org/xbl"

   xmlns:xbl="http://www.mozilla.org/xbl"

   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

   >

   <binding id="ellipsis">

   <content>

   <xul:description crop="end" xbl:inherits="value=xbl:text">

   <children/>

   </xul:description>

   </content>

   </binding>

   </bindings>

2. CSS 에서 사용시 아래처럼 -moz-binding 을 통해 XBL 바인딩을 호출 할 수 있습니다.
   
   view source

   print?

   .ellipsis {

   text-overflow: ellipsis;

   -moz-binding: url('ellipsis.xml#ellipsis');

   }

XUL:description 을 간단히 설명하면, crop 속성을 통해 잘라낼 문자열의 위치를 지정하고, inherits 속성으로 value 값에 문자열을 지정합니다. crop 값을 만약 start 나 left 로 지정하게되면 첫부분이 잘라져서 나오겠죠.