2016-06-27 30 views
3

當我選擇選項並水平滾動以閱讀完整內容時,它會顯示部分內容,但取消選擇和滾動會顯示完整內容。HTML - SELECT標記的選項部分高亮文本

如何克服這一點?簡單的答案是可觀的!

問題樣品:

平鋪後滾動選擇選項

enter image description here

平鋪後滾動取消選擇選項

enter image description here

編輯1:

什麼實際發生的事情是成員動態添加到HTML。我使用Bootstrap和JQuery框架。

<script src="https://code.jquery.com/jquery-2.2.1.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!DOCTYPE html> 
 

 

 
\t <head> 
 
\t \t <title> Select - Option example </title>  
 
\t \t 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <div class="container"> \t \t \t 
 
\t \t \t <form class="row form-horizontal" id="admin_promote_members"> 
 
       
 
       <div class="form-group"> 
 
        <div class="col-sm-2 col-xs-6"> 
 
         <h3 style="text-align: center">Admins</h3> 
 
         <select class="form-control" id="admin_view_admins" size="10" style="overflow:auto;"> 
 
          <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
\t \t \t \t \t \t \t <option value="1">[email protected]</option> 
 
         </select> 
 
         <div style="padding-top: 20px; text-align: center;"> 
 
          <button type="button" class="btn btn-danger" id="admin_admin_demote"><text> &lt;&lt; </text>Demote</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </body>

EDIT 2(液):作爲@yuri建議,chaning CSS到「選項。{顯示:表;}解決了這個問題

+1

可以請你分享你的代碼,它很難從圖片來了解。 – bhansa

+0

@Bhansa新增。但水平滾動條並未出現。 –

+0

對不起@Naveen,但即使在我的系統上執行後,我仍然沒有收到任何問題或滾動條。 – bhansa

回答

1

你可以試試你的造型<option>標籤具有:

option {display: table} 

Fiddle

看看還在text-overflowword-wrap和那些文本截斷規則