브라우저가 SELECT 태그 내에 목록 텍스트의 공백을 표시하지 않습니까?

Question

IE7을 사용하고 있는데 텍스트의 선행 공백없이 선택 태그에 옵션이 표시되는 것처럼 보입니다. 텍스트가 잘린 것처럼 보입니다. 예를 들어, 아래의 HTML 코드 블록에서 옵션 1 ~ 3은 텍스트 앞에 3 개의 공백이 있지만 브라우저를 표시 할 때 트림을 수행하는 것으로 보이며 선행 공백없이 사용자에게 표시합니다.

코드 블록 1 :

<select size="3"> 
    <option value="1"> aaa</option> 
    <option value="2"> bbb</option> 
    <option value="3"> ccc</option> 
    <option value="4">ddd</option> 
    <option value="5">eee</option> 
</select> 

또한 당신이 자바 스크립트를 통해 옵션의 텍스트를 액세스 할 때, 반환 값도 손질 것 같다.

코드 블록 2 :

var value = list.options[i].text; 

뿐만 아니라 공간을 표시 할 브라우저를 강제 할 수있는 방법이 있나요 아니면 내가 함께 붙어이 뭔가? 대신 공간의

Answer 1

사용   :

<select size="3"> 
    <option value="1">&nbsp;&nbsp;&nbsp;aaa</option> 
    <option value="2">&nbsp;&nbsp;&nbsp;bbb</option> 
    <option value="3">&nbsp;&nbsp;&nbsp;ccc</option> 
    <option value="4">ddd</option> 
    <option value="5">eee</option> 
</select> 

=== 업데이트 ===
이 또한 내 jsfiddle를 참조하십시오.

Answer 2

는 공간 대신에

  

을 시도 했습니까?

Answer 3

잘 모르지만 시도해보십시오. &nbsp; 그냥 공백 대신

Answer 4

option 텍스트에서 공백을 제거하는 브라우저 동작입니다. innerHTML은 "보존되어 있습니다"라는 사실을 알게되었으므로 HTML을 일반 공백으로 그대로 유지 한 다음이 JS를 추가하면됩니다. :

window.onload = function() { 
    var dropDownLists = document.getElementsByTagName("select"); 
    for (var i = 0; i < dropDownLists.length; i++) { 
     var oDDL = dropDownLists[i]; 
     for (var j = 0; j < oDDL.options.length; j++) { 
      oDDL.options[j].innerHTML = oDDL.options[j].innerHTML.replace(/ /g, "&nbsp;"); 
     } 
    } 
}; 

이것은 HTML 엔터티가있는 공간을 대신합니다.

Live test case.