How can I build a <select> with multiline options?
css, html, javascript, jquery
Solution
`<option>` tags have limited styling capabilities and do not support formatting.
You can use a JavaScript-based alternative. There are plenty out there if you look around.
Problem
I need to build a multi-line select control. All the `<option>`'s where text is wider than 300px (for example) become to have the necessary lines to don't exceed the mentioned limit. These images speak for themselves: First of all I tried this, but does not work. ``` <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> ``` I'm using bootstrap framework and I thought that maybe I could use dropdown control to obtain the result. I've tried setting the max-width CSS property, but it does not work too... How can I achieve this?