選擇列表中的自動換行選項

是否可以在選擇列表中換行較長的選項？選擇列表中的自動換行選項

我有一個動態選擇列表，有些選項非常冗長。我想要太長的選項來包裝到下一行。除此之外，我想縮進這些線。

我的解決方案，如果這是不可能的只是修剪結果n字符。

這是我有：

I'm a short option 
This is a really really really long option 
This one isn't too bad 
But whoa look how long I am! I go on forever!

這裏還有想什麼，我有：

I'm a short option 
This is a really really 
    really long option 
This one isn't too bad 
But whoa look how long 
    I am! I go on forever!

來源

2010-08-27 hookedonwinter

你不能用一個標準<option>做到這一點，你將需要推出你自己或find a menu plugin

來源

2010-08-27 20:40:26

我發現這一個：https://github.com/fnagel/jquery-ui/wiki/Selectmenu它做什麼原始問題是問。 – tomcat23 2011-03-25 02:04:53

答案中的鏈接已死（R.I.P.） – TheBird956 2016-11-29 18:45:29

下面是一個快速，純粹的jQuery解決方案，可能會有所幫助。除了創建自己的下拉菜單並從Scott Evernden提到的隱藏選擇中拉取值/文本之外。這會給你一些空間。它不會在一個詞的中間切斷，但同時它不會包裝文本。它會將全文放入標題中，以便用戶翻轉並查看包裝的全文文字。然後，它會使用maxChar設置轉到一定數量的字符，然後查找它所處的單詞的結尾，以免切斷單詞。該選項的最小寬度應該保持與select一致，但繼續前進並使用maxChar變量進行播放，並避免超出範圍。這是一個簡短的解決方法，因爲在大多數情況下，我會使用定製的解決方案，但對於快速列表，用戶可以知道他們在第一個或第二個字中選擇的內容，這很有用。希望這可以幫助別人：

var optionText, array = [], newString, maxChar = 40; 
$('select').each(function(){ 
    $(this).find('option').each(function(i,e) { 
     $(e).attr('title',$(e).text()); 
     optionText = $(e).text(); 
     newString = ''; 
     if (optionText.length > maxChar) { 
      array = optionText.split(' '); 
      $.each(array,function(ind,ele) { 
       newString += ele+' '; 
       if (ind > 0 && newString.length > maxChar) { 
        $(e).text(newString); 
        return false; 
       } 
      }); 

     } 
    }); 
});

來源

2016-03-30 13:31:27

除了'option'元素上的'title'屬性之外，我已經爲我工作了，Chrome瀏覽器看起來不再被識別。 – Mike 2016-09-05 20:45:01

選擇列表中的自動換行選項

回答

相關問題