달력

022012  이전 다음

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  •  
  •  
  •  

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

DHTML 2010/08/06 17:17
 
 

[출처] 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 로 지정하게되면 첫부분이 잘라져서 나오겠죠.

크리에이티브 커먼즈 라이선스
Creative Commons License

'DHTML' 카테고리의 다른 글

[펌] css 말줄임 처리...  (0) 2010/11/25
[펌] [CSS] text-overflow:ellipsis 를 FireFox 에서 사용하기  (0) 2010/08/06
[링크] 파비콘 만들어주는 사이트  (0) 2008/09/19
pre 태그 사용시 글이 길어서 테이블이 깨질경우...  (0) 2007/12/06
심심해서 만들어본 간단한 롤오버 메뉴  (0) 2007/06/08
[link] 실전 웹 표준 가이드  (0) 2007/04/23


Posted by tornado
트랙백0 | 댓글0