1

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>
4b0
  • 21,981
  • 30
  • 95
  • 142
Mahadev
  • 29
  • 3
  • 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
  • 1
    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

2 Answers2

0

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>
Sanyami Vaidya
  • 799
  • 4
  • 21
0

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.

SF..MJ
  • 862
  • 8
  • 19
  • 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