限制選擇列表的初始寬度

Question

我有一個選擇列表，其中一些客戶端已經爲他們輸入了非常長的選項，這打破了設計。我想知道是否有一種方法可以在選擇小部件上設置固定寬度，但仍然可以使用它生成的下拉菜單仍然足夠寬以顯示所有選項。

Answer 1

不知道如果你打開使用jQuery在所有但我通常用這個方法：

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

是有些不連貫，但看起來比切斷內容

Answer 2

See the working example here.

你只需要申請width您選擇框串接或者CSS。它會像你指定的一樣寬，但點擊後，它將顯示任何寬度的所有選項。

Answer 3

我不知道，如果你可以用CSS做它（獨立於瀏覽器），但這裏有其他2個解決方案：

1而不是顯示的「veeeeery looooooooooong teeeeeeeeext」可以顯示類似「veeeeery loooo。 ..「;

2.使用div和列表構建您的選擇，使其在關閉時具有特定的寬度，以及按箭頭之類的按鈕顯示全寬時。 （我不確定你明白我想用這個說什麼......）。

Answer 4

如果更好你擁有的列表（<select>中的條目）是用戶輸入的，並且用戶可以輸入500個字符，他們肯定會這樣做。

在這種情況下，我不會去<select>列表，而是用<div>構建的自定義列表。

這並不難，你需要的是

包含默認 選擇一個div，
一個隱藏的div的所有選項
當用戶點擊默認選項顯示隱藏的div
在中隱藏的DIV項目的點擊（即現在可見的）作出的第一個div

有

或許已經選定項目jquery插件爲此。但我不確定你是否開放給jQuery，反正我不是jQuery專家。

我知道這比做一個select更努力，但我認爲這是值得的。所有的詭計 - 擴大div onmouseover，onclick等看起來不太好，可能仍然會破壞你的設計，並且根據用戶可以輸入的數據量，仍然不會有效。

在自定義列表方法中，可以包裝元素，以便完全控制。

Answer 5

添加到CSS是這樣的：

select { 
    border: 1px solid #838383; 
    border-style: outset; 
    font-weight: bold; 
    color: #3F3F3F; 
    max-width: 150px !important; 
    overflow: hidden; 
} 

option { 
    max-width: 120px !important; 
    overflow: hidden; 
} 

這對我的作品。注意錨點前面有沒有點。

Answer 6

由於您沒有指定您需要的瀏覽器支持，因此這可能是也可能不是解決方案。這適用於大多數瀏覽器IE9 +

select { 
    width: 100%; 
    max-width: 150px; 
} 

簡短而甜美。展開後，select將顯示整個文本（除非它超過視口！）。