选择列表中的自动换行选项

Question

是否可以在选择列表中包装长选项？

我有一个动态选择列表，其中一些选项很长。我想要太长而无法换行的选项。除此之外，我想缩进这些行。

如果这不可能，我的解决方案是将结果修剪为 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!

Answer 1

你不能用标准的 <option> 做到这一点，你需要自己动手或找到一个菜单插件

Answer 2

这是一个快速而纯粹的 jQuery 解决方案，可能对某些人有所帮助。除了创建自己的下拉菜单并从 Scott Evernden 提到的隐藏选择中提取值/文本之外。这会给你一些玩耍的空间。它不会在单词中间被切断，但同时它不会换行。它会将全文放入标题中，以便用户可以翻转并看到包含的全文单词。然后它将使用 maxChar 设置转到一定数量的字符，然后查找它所在单词的结尾，以免切断单词。选项的最小宽度应使其与选择保持一致，但继续使用 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;
                }
            });

        }
    });
});