KiNGDOM
카이(KAi)'s Blog - God's in his heaven, All right with the world.

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

.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 파일로 저장합니다.

   <?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 바인딩을 호출 할 수 있습니다.
   

   .ellipsis {
       text-overflow: ellipsis;
       -moz-binding: url('ellipsis.xml#ellipsis');
   }

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


- 참고 내용

• [w] CSS3 txt-overflow [English]
• [w] CSS3 옅보기 text-overflow [한글]
• [w] 긴 문자열 css로 자르기 ( text-overflow:clip, ellipsis Code Tip ) [한글]