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?