如何使用多行选项构建<select>?

har*_*on4 20 html javascript css jquery css3

我需要构建一个多行选择控件.所有<option>的地方文本的宽度大于300像素(例如)成为有必要的行不超过提到的上限.

这些图像不言自明:

http://home.comcast.net/~ephmynus/select1.jpg http://home.comcast.net/~ephmynus/select2.jpg


首先我尝试了这个,但是没有用.

<html>
    <head>
        <style>
            option{
                width: 100px; 
                white-space: wrap;
            }

        </style>
    </head>
    <body>
        <select>
            <option>I'm short</option>
            <option>I'm medium text</option>
            <option>I'm a very very very very very very very very very long text</option>
        </select>   
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我正在使用bootstrap框架,我想也许我可以使用下拉控件来获取结果.我已经尝试设置max-width CSS属性,但它也不起作用......

我怎样才能做到这一点?

Dio*_*ane 7

<option> 标签具有有限的样式功能,不支持格式化.

您可以使用基于JavaScript的替代方案.如果你环顾四周,那里有很多.

  • 添加,可以完成的样式也是不稳定的和浏览器特定的. (2认同)