how can i display multiple lines text caption in select tag?

i am using <select> to make a list inside a select tag element with fixed width. let's say it is 200px.

this is my problem : my caption was cropped due the <select> fix width.

problem picture


and this is my expectation :

expectation

any suggestion to achieve that goal without editing the option caption?

3 answers

  • answered 2017-09-19 11:46 Uk Lakhani

    Simply, You can do with the css which is below:

    <style>
     .test {word-wrap:break-word;} 
    </style>
    
    
    <html><header><title></title></header>
    <body>
    <select class="test">  </select>
    </body>
    </html>
    

  • answered 2017-09-19 11:46 Adrian Fella

    Unfortunately not, browsers don't provide any possibility to format this.

    You could either use fake Selects (like Bootstrap e.g.) or add at least the title to the option to provide the whole text on mouseover:

    <option title="Insert title of way too long Option text here">way too long Option text</option>
    

  • answered 2017-09-19 11:46 Znaneswar

    You can't directly style <options> tag because it supports limited styles and styling for these elements is handled by the user's OS ref here.

    and Its supporting styles are

    font-family font-* color background-color

    You can style it by using JQuery third party plugins