javascript 展开时设置 Select 的最大宽度?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5390956/
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
Set max width of Select when it expands?
提问by Skizit
I've got the following...
我有以下...
I'd like to set the max width so that when it is expands (when you click it) rather than the menu growing to larger than 180px it remains a max of 180px and the text simply cuts off. How would I achieve this?
我想设置最大宽度,以便在它展开时(当您单击它时)而不是菜单增长到大于 180 像素,它仍然是 180 像素的最大值,并且文本只是被切断。我将如何实现这一目标?
NOTE:I would prefer the markup in Javascript, not CSS. I am aware of max-width in CSS.
注意:我更喜欢 Javascript 中的标记,而不是 CSS。我知道 CSS 中的 max-width 。
回答by Shivkant
Check the following code:
检查以下代码:
Page
页
<select id='select' style='max-width:180px;'>
<option class="maxwidth" value="volvo">Volvo</option>
<option class="maxwidth" value="saab">Saab</option>
<option class="maxwidth" value="mercedes">Mercedes</option>
<option class="maxwidth" value="LARGER THAN 180PX TEST TEST TEST TEST">LARGER THAN 180PX TEST TEST TEST TE</option>
</select>
CSS
CSS
.maxwidth
{
max-width:100px;
}
I have updated the code on the link you have provided.
我已经更新了您提供的链接上的代码。
http://jsfiddle.net/WvgSw/347/
http://jsfiddle.net/WvgSw/347/
Note: please mark the correct answer and Vote For it.
注意:请标记正确答案并为它投票。
回答by anothershrubery
As far as I know you cannot limit the width of the drop down of a regular select
control. You will need to use custom controls, either built by yourself or using other packages.
据我所知,您不能限制常规select
控件下拉的宽度。您将需要使用自定义控件,可以是自己构建的,也可以是使用其他包的。
DevExpress, and probably the likes of Infragistics, provides this functionality.
DevExpress,可能还有 Infragistics 之类的,提供了这个功能。
回答by Amrish
Try setting the width of the select box to auto
尝试将选择框的宽度设置为自动
menu.style.width = "auto";
This way it wont expand when you click it, but it wont cut off the largest entry.
这样当您单击它时它不会扩展,但它不会切断最大的条目。
~Amrish
~阿姆瑞什