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

Question

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.

and this is my expectation :

expectation

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

See here. https://stackoverflow.com/questions/28562621/html-select-option-multiline-value. It might help — Thusitha, Sep 19 '17 at 11:51
Use white-space:normal; for the li check https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=nowrap .Please provide the codes which you have tried for better understanding. — Hema Nandagopal, Sep 19 '17 at 11:51

score 0 · Answer 1 · answered Sep 19 '17 at 11:54

0

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 Sep 19 '17 at 11:54

Uk Lakhani

score 0 · Answer 2 · answered Sep 19 '17 at 11:55

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>

score 0 · Answer 3 · answered Sep 19 '17 at 12:16

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