HTML選擇下拉列表會關閉屏幕

考慮下面的代碼：HTML選擇下拉列表會關閉屏幕

<div style="float: left;"> 
    <select style="width: 160px;"> 
     <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div> 

<div style="float: right;"> 
    <select style="width: 160px;"> 
     <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div>

當打開右側選擇框，下拉列表中的內容去關閉屏幕。此外，當列表會更長，你將無法滾動列表（只有鼠標滾輪和鍵盤，但滾動條是不可見的）

有沒有解決這個問題？當然，您可以在選項上設置寬度/最大寬度，但這會切斷選項元素的內容。有什麼建議麼？

來源

2011-06-09 Geert

截圖會有幫助。 – Ham 2011-06-09 10:49:00

在本地設置此代碼，我真的不明白是什麼問題。在Firefox和safari中，你會得到一些非常長的菜單。這是你的意思嗎？「從屏幕上掉下來」？ – 2011-06-09 10:49:00

http://jsfiddle.net/aQYnF/在FF4第一個選項走出屏幕 – VAShhh 2011-06-09 10:50:33

我認爲你的意思是選擇框的右側不可見，所以用戶不能使用滾動條。

您有兩種潛在的選擇，我可以在更改爲JavaScript解決方案之外看到，第一種是重新配置元素以允許更長的內容。

第二種是將元素的寬度指定爲百分比值（如下所示），但缺點是select元素的寬度會動態更改，您將失去一些設計控制權。

<div style="float: right;"> 
    <select style="width:100%"> 
     <option width=">asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div>

我的確在Chrome和Firefox的快速測試，你可以使用你想，我在100％和50％的測試，在50％什麼都百分比值 - 這取決於內容或任何性質佔位符值如「 - 選擇 - 」，元素將只顯示最長項目長度的一半。

根據我當時的需求，我會研究最有可能查看jQuery插件或其他JavaScript以獲得更好的解決方案。

來源

2011-06-09 11:11:08 Ryan

謝謝，我擔心我必須使用JavaScript來解決這個問題。重新定位或放大選擇框不是我的用戶界面中的一個選項。 – Geert 2011-06-09 11:33:46

退房這個答案

Are Multi-line Options in Html Select Tags Possible?

純HTML和選擇是不可能自動換行的多行選項的內容（這樣就不會去關閉屏幕）

來源

2011-06-09 10:53:41 VAShhh

我最近遇到了這個問題（使用Firefox） - 打開的選擇菜單會超出桌面界面的範圍。

我的解決方案是將選項內容複製到title屬性中。同時更新選擇標題的更改，所以懸停在選項或選擇將在瀏覽器窗口中顯示工具提示 - demo。

var $select = $('select'); 

$select 
    .on('change', function() { 
     var $this = $(this), 
      // use replace to remove extra white (if desired) 
      txt = $this.find('option:selected').text().replace(/\s+/g, ' '); 
     // add title to select 
     $this.attr('title', txt); 
    }) 
    .change() 
    .find('option').each(function() { 
     var $this = $(this); 
     // add title to each option, so it works on hover 
     $this.attr('title', $this.text()); 
    });

來源

2015-02-19 19:06:00 Mottie

HTML選擇下拉列表會關閉屏幕

回答

相關問題