web-dev-qa-db-fra.com

Comment puis-je créer un <select> avec des options multilignes?

J'ai besoin de créer un contrôle de sélection multiligne. Tous les <option> où le texte est plus large que 300 px (par exemple) devient d'avoir les lignes nécessaires pour ne pas dépasser la limite mentionnée.

Ces images parlent d'elles-mêmes:

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

Tout d'abord, j'ai essayé cela, mais cela ne fonctionne pas.

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

J'utilise bootstrap et j'ai pensé que je pourrais peut-être utiliser le contrôle déroulant pour obtenir le résultat. J'ai essayé de définir la propriété CSS max-width, mais cela ne fonctionne pas trop .. .

Comment puis-je atteindre cet objectif?

javascriptjqueryhtmlcsscss3
20
harrison4

<option> les balises ont des capacités de style limitées et ne prennent pas en charge le formatage.

Vous pouvez utiliser une alternative basée sur JavaScript . Il y en a plein si vous regardez autour de vous.

7
Diodeus - James MacFarlane