CSS : 텍스트가 오버플로되어 숨겨진 텍스트 : 줄임표가 여전히 있습니다.

Question

길이가 다양하지만 길이가 고정 된 ul이 있습니다. 리에도 아이콘이 있습니다.

<ul> 
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> 
    <li><span class="icon"></span>Short text</li> 
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> 
</ul> 

리튬의

는 text-overflow:ellipsis;로 설정 text-overflow 속성이 있습니다. 그러나 유혹 커서를 등록에서 ( .icon) 뒤에 블록 요소를 넘쳐되었을 클립 텍스트

내 CSS :

.icon { 
    height:18px; 
    width:18px; 
    float:right; /*there is a good reason for this, don't complain ;) */ 
    cursor:pointer; 
    background:url(icons.png); 
    background-position:-72px -72px; 
} 
.icon:hover { 
    background-position:-90px -72px; 
} 
li { 
    text-overflow:ellipsis; 
    height:20px; 
    overflow:hidden; 
    white-space:nowrap; 
    list-style-type:none; 
    width:150px; 
} 

내 jsfiddle을 확인, 그것이 많은 지옥을 설명 더 나는 것보다 : P

http://jsfiddle.net/eXXTG/

텍스트 오버 플로우에 의해 숨겨진 넘치는 텍스트 : 타원 일 정지 e dom은 텍스트 뒤 (또는 텍스트가있는 곳) 위에 커서를 올려 놓는 커서를 등록하지 않습니다.

해결 방법에 대한 의견이 있으십니까?

Cheeers

Answer 1

당신은

Answer 2

그냥 아이콘 클래스에 표시 블록를 추가 .icon 클래스에

position: relative 

을 추가 할 수 있습니다

.icon { 
    height:18px; 
    width:18px; 
    background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png); 
    float:right; 
    /*there is a good reason for this, don't complain ;) */ 
    cursor:pointer; 
    background-position:-72px -72px; 
    display: block; 
}