Как я могу построить <select> с многострочными параметрами?

Мне нужно создать многострочный элемент управления. Все <option>, где текст шире, чем 300 пикселей (например), становятся необходимыми для того, чтобы не превышать указанный предел.

Эти изображения говорят сами за себя:

Прежде всего я пробовал это, но не работает.

<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>

Я использую фреймворк bootstrap, и я подумал, что, возможно, я могу использовать dropdown control для получения результата. Я попытался установить свойство CSS максимальной ширины, но он тоже не работает...

Как я могу это достичь?

Ответ 1

https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Я думаю, что это может вам помочь, никогда не использовалось раньше:)

Ответ 2

Теги

<option> имеют ограниченные возможности стилизации и не поддерживают форматирование.

Вы можете использовать альтернативу на основе JavaScript. Там много, если вы посмотрите вокруг.

Ответ 3

Я нашел две ссылки, которые объясняют, почему это невозможно (и возможные обходные пути):

первая ссылка.

вторая ссылка.

Надеюсь, это поможет.