공백 처리 스타일 "..."계속 처리

Question

공백 적용 : 텍스트 일부분을 성공적으로 마무리합니다. 나는 그것이 nowrap 스타일에 의해 잘리는 경우에 텍스트 조각 끝에 표준 "..."을 붙이는 것이 가능한지 궁금합니다. 이것은 CSS가 처리 할 수있는 것입니까? 아니면 자바 스크립트가 필요합니까?

감사합니다.

Answer 1

파이어 폭스 (그리고 아마도 몇 가지 다른) 지원 :

text-overflow: ellipsis; 

하지만 어떤 방법으로하지 크로스 브라우저입니다. 당신이 자바 스크립트를 사용해야합니다 크로스 브라우저 뭔가를 얻으려면. 내가 과거에 이런 짓을 한 가지 방법은 다음과 같습니다

이

<div class="text"> 
    text goes here 
    <div class="ellipsis">...</div> 
</div> 

.text { 
    position : relative; 
} 

.text .ellipsis { 
    display : none; 
} 
.text.long .ellipsis { 
    display : block; 
    position : absolute; 
    right  : 0px; 
    background : #FFF; 
} 

다음 JS 단순히이 같은 것입니다 (jQuery를 사용하여) :

$('.text').each(function(){ 
    var $this = $(this); 
    $this[ ($this.width() > $this.outerWidth()) ? 'addClass' : 'removeClass' ] 
     ('long'); 
}); 

Answer 2

브라우저 지원을 가정 할 때, 그것은 또 다른 겉으로 작동하지 않을 수 있습니다 무관 한 이유.
전제 조건 : 텍스트 내용이 누구의 스타일
overflow:hidden, whitespace:nowrap 및 text-overflow:ellipsis
내 관측하고있다, 그 용기 블럭의 위치 속성입니다 "상대"여야 용기 블럭 안에 있습니다. 타원은 이 절대적으로 일 때 표시되지 않으며 단순히 텍스트가 잘 리게됩니다.

여기

대답 손톱이 absolute vs relative position width & height