jQuery html选择下拉宽度太大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12371329/
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
html select dropdrown width is too big
提问by Sarah McLachlane
I searched for a fix for my problem but I can't find one, maybe I don't know how to search this in english since it's not my first language.
我搜索了解决我的问题的方法，但找不到，也许我不知道如何用英语搜索，因为它不是我的第一语言。
Anyway, my problem is that I am trying to use the feature from HTML and one of the options is very loooong and if I leave the without any width passed as style it will destroy the entire website. If I use width it will only show something from the and look as cut. However I saw an example that had "..." in it which I gladly use but I don't know how.
无论如何，我的问题是我正在尝试使用 HTML 中的功能，其中一个选项非常糟糕，如果我不将任何宽度作为样式传递，它将破坏整个网站。如果我使用宽度，它只会显示来自 和 看起来像切割的东西。但是，我看到了一个带有“...”的示例，我很乐意使用它，但我不知道如何使用。
Just to be clear, I am looking for some help to make my look like "Long option ..." or If anyone knows a better way?
为了清楚起见，我正在寻找一些帮助，让我看起来像“长期选择......”或者如果有人知道更好的方法？
回答by Nope
Sample HTML:
示例 HTML：
<select id="myOptions">
<option value="1"><span>Item 1</span></option>
<option value="2">Item 2</option>
<option value="3">Item 3 which has very very very very very long text</option>
<option value="4">Item 4</option>
</select>
Sample CSS:
示例 CSS：
select{
width: 100px;
text-overflow: ellipsis;
}
DEMO- Adding ... to selected value only
演示- 仅将 ... 添加到选定的值
Change the width to what ever fits your situation best. Applying text-overflow: ellipsisadds the ...to the text which is longer than the specified width.
将宽度更改为最适合您情况的宽度。应用text-overflow: ellipsis将添加...到比指定宽度长的文本。
This style is onlyapplied to the selected value but still displays the options in full when the dropdown is clicked.
此样式仅应用于选定的值，但在单击下拉列表时仍会完整显示选项。
回答by billyonecan
If you're looking for a very simple solution like the one you described (appending ...) then something like this should work for you:-
如果您正在寻找一种非常简单的解决方案，例如您所描述的（附加...），那么这样的解决方案应该适合您：-
$(document).ready(function() {
var maxLength = 15;
$('#example > option').text(function(i, text) {
if (text.length > maxLength) {
return text.substr(0, maxLength) + '...';
}
});
});
This simply loops over each optionand checks its texts length. If it is greater than maxLengthit will be shortended to the same length as maxLengthand ...will be appended to it.
这只是循环每个option并检查其文本长度。如果它是大于maxLength它将被shortended到相同的长度maxLength和...将附加到它。
Here's some example markup to go with it:-
这是一些与之配套的示例标记：-
<select id="example">
<option value="1">Short</option>
<option value="2">Oh dear, this option has really long text :(</option>
</select>
Here's a fiddle
这是一把小提琴
回答by Jukka K. Korpela
If you set width on the selectelement, e.g.
如果您在select元素上设置宽度，例如
select { width: 7em }
the dropdown list will still appear in its natural width.
下拉列表仍将以其自然宽度显示。
If some option is verylong, then you have a usability problem anyway and you should consider making it shorter or using different controls, like a set of radio button or checkboxes.
如果某个选项很长，那么无论如何您都会遇到可用性问题，您应该考虑将其缩短或使用不同的控件，例如一组单选按钮或复选框。
回答by Burimi
You could solve this using jQuery and reading thisarticle .
您可以使用 jQuery 并阅读这篇文章来解决这个问题。
var el;
$("select")
.each(function() {
el = $(this);
el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
})
.mouseenter(function(){
$(this).css("width", "auto");
})
.bind("blur change", function(){
el = $(this);
el.css("width", el.data("origWidth"));
});
回答by ddinchev
It depends on how you add the options to the select - is it generated with server-side language like PHP/Python/etc? Or it's some JS or its static HTML?
这取决于您如何将选项添加到选择中 - 它是使用 PHP/Python/等服务器端语言生成的吗？或者它是一些 JS 或其静态 HTML？
You could use any of those languages to shorten strings (with ... in the end). Here you could find how to do it with js: javascript shorten string without cutting words
您可以使用这些语言中的任何一种来缩短字符串（最后使用 ...）。在这里你可以找到如何用 js 做到这一点： javascript缩短字符串而不切割单词
If you are more specific and show some code, I could help you accomplish this in your specific case.
如果您更具体并显示一些代码，我可以帮助您在特定情况下完成此操作。
回答by Mayank Nimje
Changing/Altering select menu using css alone is not possible. I have added a small demo using jquery to simulate the issue with solution.
单独使用 css 更改/更改选择菜单是不可能的。我添加了一个使用 jquery 的小演示来模拟解决方案的问题。
[Truncating or showing ellipses for Long option value][1]
[1]: http://jsfiddle.net/xpvt214o/996293/
