Html 选择列表中的换行字选项

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

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

如果不可能，我的解决方案是将结果修剪为

n

个字符

以下是我所拥有的：

我是一个短选项
这是一个很长的选择
这个还不错
但哇，看我活了多久！我会永远坚持下去！

以下是我想要的：

我是一个短选项
这是一个非常非常
非常长的选择
这个还不错
但是哇，看看有多久了
我是！我会永远坚持下去！

使用标准的

您无法做到这一点，您需要自己滚动或找到一个菜单插件

以下是一个快速而纯粹的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;
                }
            });

        }
    });
});

---

我发现了这个：它与原来的问题是一样的。你答案中的链接是死的（R.I.P。）你好，斯科特，链接是死的（再次）。请将其重新粘贴到适当的位置，或删除答案的该部分。最好的！读取后标记为

不再需要

。对我有效，除了

选项

元素上的

标题

属性，Chrome似乎不再识别该属性。@Mike，对于Chrome，我们该怎么办？@Steve除了得到一个jquery select插件，该插件将把

完全重写为完全不同的东西（如另一个答案中所建议的那样），我认为这不可能像这个答案那样以非侵入性的方式实现。@Mike-我不明白为什么上面的代码中提到了

title

属性。是否可以重写代码以删除

标题

？@Steve只需删除设置标题的单行即可。或者干脆把它放在那里，对于支持它的浏览器来说，它将按预期工作。在Chrome上，唯一的区别是，对于被截断的元素，将鼠标悬停在上面无法获取全文。这个答案也很古老，因此可能是其他浏览器现在的行为与Chrome相同。我不知道。