동적으로 잘림 <option> 맞게 텍스트 <select> 목록

Question

기본적으로 <select></select> 요소에 대해 표시된 선택기 목록은 해당 문자가 들어있는 가장 큰 숫자 인 <option></option>만큼 넓습니다. CSS로 선택 태그의 너비를 하드 코딩하여 더 좁게 만들면 가장 넓은 옵션이 디스플레이에서 잘립니다.

_... (생략 부호)을 추가하여 옵션이 선택되었을 때 잘리는 것을 보여 주지만, 드롭 다운을 확장하면 텍스트를 넣을 수 있습니다. 후행 줄임표없이 전체 너비로 드롭 다운합니다.

어떻게하면됩니까?

Answer 1

css 및 jQuery 사용 :

select, option.selected { 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
} 

jQuery를

$('select').on('change',function(){ 
    $(this).find('option').removeClass('selected'); 
    $(this).find('option:selected').addClass('selected'); 
}); 

demo

Answer 2

나는 당신이 찾고있는 것은 생각 :

자동으로 지정된 폭으로 선택 옵션을 강제하고, 범위 내에서 유지 생략에 대한 '넘치는'텍스트를 변환합니다

option { 
    width: 200px; // Adjustable 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

:)

희망이 도움이됩니다.

Answer 3

여기 크롬에 대한 해결책을 발견 :

https://stackoverflow.com/a/26627224/4743939

이 방법을 사용하면 선택 태그의 캐럿 아이콘이 사라 지므로 선택 이미지의 배경 이미지를 사용할 수 있습니다.