Select dropdown Option content wrap not working

Question

Select dropdown wrap not working and I used:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

but no result.Any one can help on this

<div style="width: 200px;">
<select  style="width: 200px;">
  <option value="">Volvo</option>
  <option value="">You already have a live sesstion of this application open.Yoy can only have one session of this application in this webpage at a time.</option>
  <option value="">Mercedes</option>
  <option value="">Audi</option>
</select>
</div>

Hi Shree Khanal did you edit this snippet?, I did'nt got any update — Mahadev, Mar 30 '18 at 05:17
It's not possible in the simple select tag but you can get your requirement by using any custom plugin — parvezalam khan, Mar 30 '18 at 05:29
Possible duplicate of [Is it possible to make text-overflow:ellipsis for select with css only?](https://stackoverflow.com/questions/45494203/is-it-possible-to-make-text-overflowellipsis-for-select-with-css-only) — Mehravish Temkar, Mar 30 '18 at 05:33
Use javascript solution or custom dropdown. [look here](https://stackoverflow.com/questions/36676701/set-width-at-option-of-select-box) — yrv16, Mar 30 '18 at 05:35
i think you you have to use some plugin to achieve this. like https://github.com/fnagel/jquery-ui/wiki/Selectmenu — Ram Singh, Mar 30 '18 at 06:32

score 0 · Answer 1 · answered Mar 30 '18 at 05:55

You can't format line breaks into an option; however, you can use the title attribute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the full skinny in the title.

<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">1</option>

<div style="width: 200px;">
<select  style="width: 200px;">
  <option value="">Volvo</option>
  <option value="">You already have a live sesstion of this application open.Yoy can only have one session of this application in this webpage at a time.</option>
  <option value="">Mercedes</option>
  <option value="">Audi</option>
  <option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">1</option>
</select>
</div>

score 0 · Answer 2 · answered Mar 30 '18 at 06:22

You can't do that. Usually options cannot be style. So you can use jquery like this

$('option').each(function(){
   var text=$(this).text()
   $(this).val(text).text(text.substr(0,50)+'…')
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 200px;">
<select  style="width: 200px;">
  <option value="">Volvo</option>
  <option value="">You already have a live sesstion of this application open.Yoy can only have one session of this application in this webpage at a time.</option>
  <option value="">Mercedes</option>
  <option value="">Audi</option>
</select>
</div>

I have given text.substr(0,50) you can Change.

Thanks for the solution but my client is not accepting for this solution, He wants wrap the text into second line any alternate solution please — Mahadev, Mar 30 '18 at 08:37

Select dropdown Option content wrap not working

2 Answers2