인라인 요소가있는 줄임표?

Question

텍스트에 선택된 모든 레이블이 표시되도록 jQuery UI MultiSelect Widget을 수정했지만 표시 할 요소가 너무 많으면 텍스트가 잘리고 줄임표가 표시됩니다. 그래서 그것을 한 적이 : 그 솔루션에 좋아하지 않는

.ui-multiselect .selected-text { 
    display: block; 
    max-width: 190px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

유일한 일이 내가 요소 (범위)에 display: block을 설정 한 것입니다. 이를 사용하지 않으면 width 매개 변수가 무시되고 스팬이 텍스트 크기로 확장됩니다.

줄임표를 인라인 요소와 함께 사용할 수 있습니까 (display에서 block으로 변경하지 않고)? 그렇다면 어떻게 달성 할 수 있습니까?

Answer 1

는이 호출

inline과 상황을 정확히 이런 종류의 설계 block 사이에 절반 방법의 집으로 작동하는 display 옵션 ...이

display:inline-block; 

block 대신이 요소를 사용하면 콘텐츠가 여전히 inline 인 것처럼 흐르지 만 block처럼 작동합니다. 그 내용에 대해서는 생략 부호가 작동해야 함을 의미합니다.

Answer 2

text-overflow을 인라인 요소에 적용 할 수 없습니다.

http://dev.w3.org/csswg/css-ui/#text-overflow