Html 选择列表中的自动换行选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3587942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Word wrap options in a select list
提问by hookedonwinter
Is it possible to wrap long options within a select list?
是否可以在选择列表中包含长选项？
I have a dynamic select list, and some of the options are pretty lengthy. I'd like options that are too long to wrap to the next line. Beyond that, I'd like to indent those lines.
我有一个动态选择列表，其中一些选项非常冗长。我想要太长而无法换行到下一行的选项。除此之外，我想缩进这些行。
My solution if this isn't possible is to just trim the result to ncharacters.
如果这是不可能的，我的解决方案是将结果修剪为n字符。
Here's what I have:
这是我所拥有的：
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!
And here's what I'd like to have:
这就是我想要的：
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!
采纳答案by Scott Evernden
you cant do this with a standard <option>you will need to roll-your-own or find a menu plugin
你不能用标准来做到这一点，<option>你需要自己动手或找到一个菜单插件
回答by Erik Grosskurth
Here is a quick and pure jQuery solution that may help some. Outside of creating your own drop down and pulling the values/text from a hidden select as mentioned by Scott Evernden. This will give you some room to play with. It doesn't cut off in the middle of a word but at the same time it doesn't wrap the text. It will put the full text into the title so a user may rollover and see the full text word wrapped. It will then use the maxChar setting to go to a certain number of characters then look for the end of the word it is on so as not to cut off the word. The min-width of the option should keep it inline with the select but go ahead and play with the maxChar variable and it should keep it from going outside the bounds. This is a short workaround as I would in most cases go with a customized solution but for quick lists where users can know what they are picking with the first word or two this works great. Hope this helps someone:
这是一个快速而纯粹的 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;
}
});
}
});
});
