2011-09-14 173 views
3

我有這樣的:多選擇固定寬度的問題太長選項

<select id="combo1" size="7" name="operacion"> 
    <option selected="" value="000">Selecciona una categoría</option> 
    <option value="1">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option> 
    <option value="2">"MODIFICACIONES"</option> 
    <option value="3">"RENOVACIÓN"</option>       
</select> 

而且它的寬度是固定的,但因爲它發生的選項來自數據庫他們有時太長,而且也沒有我可以看到他們。

你可以在這裏看到:http://jsfiddle.net/vN47R/

我能找到的唯一的事情就是In a fixed width <select multiple> html box, is there a way to see text options that are to long?,但沒有幫助我。

+0

這可能有所幫助:http://stackoverflow.com/questions/4258723/fix-size-drop-down-with-long-text-in-options-restricted-view-in-ie或http:// stackoverflow .com/questions/1787620/wrapping-text-within-a-multiple-select-list –

+0

是的,我懷疑這不會有一個簡單的CSS解決方案:S –

回答

3

您可以設置該選項標題,這樣,當你點處的項目的文本顯示爲工具提示:

<option value="1" title="AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option> 

演示:http://jsfiddle.net/Guffa/vN47R/2/

我在一些瀏覽器中測試過它,至少它在IE 9,Firefox 6,Chrome 13和Opera 11中工作。但是,它自然不適用於你無法指向的環境該項目,爲例如在電話上。

0

嘗試使用word-break: break也許white-space: normal

+0

沒有那些wroked我 –

+0

那樣我會推薦jQuery插件的選擇http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/這種方式,你將能夠風格選擇容易 – simoncereska

2

試試這個:

環繞你選擇框在一個DIV,並在其上設置overflow-x: scroll屬性,然後指定的寬度。然後,從您的SELECT框本身取出特定的寬度。這樣,根據內容,SELECT框將根據需要展開,並且您將在DIV上獲得水平滾動條。唯一的缺點是,如果你沒有設置足夠高的高度,你將不得不滾動到右邊以在你的SELECT框中向下滾動。

+0

我做到了,如果任何人都可以使用它:http:/ /jsfiddle.net/vN47R/12/對我來說,它將無法正常工作,因爲我無法控制選項的數量將在選擇和雙滾動將失敗,但謝謝你的想法 –

+0

要消除雙滾動,在DIV存儲器上設置「overflow-y:hidden」核能研究所。這些是CSS3選項,因此它們不適用於IE 8和更舊版本的瀏覽器。 – chrishall78