Line Break in HTML Select Option

Question

Can I have a two line text in an html select option  How

User · Answer

yes  by using css styles  white-space  pre-wrap   in the  dropdown class of the bootstrap by overriding it  Earlier it is white-space  nowrap  so it makes the dropdown wrapped into one line  pre-wrap makes it as according to the width

User · Answer

How about putting the long text in another  lt option gt  right below and disabling it  Might be a workaround for someone so posting here    x000D   x000D           lt select gt  x000D               lt option gt My real option text lt  option gt  x000D               lt option disabled style  font-style italic  gt  amp nbsp  amp nbsp  amp nbsp     and my really really long option text that is basically a continuation of previous option  lt  option gt   x000D               lt option disabled style  font-style italic  gt  amp nbsp  amp nbsp  amp nbsp     and still continuing my previous option  lt  option gt   x000D               lt option gt Another real option text lt  option gt  x000D           lt  select gt  x000D   x000D   x000D

User · Answer

HTML Code   lt section style  background-color rgb 237 247 249    gt       lt h2 gt Test of select menu  SelectboxIt plugin  lt  h2 gt       lt select name  select this  id  testselectset  gt           lt option value  01  gt Option 1 lt  option gt           lt option value  02  gt Option 2 lt  option gt           lt option value  03  gt Option 3 lt  option gt           lt option value  04  gt Option 4 lt  option gt           lt option value  05  gt Option 5 lt  option gt           lt option value  06  gt Option 6 lt  option gt           lt option value  07  gt Option 7 with a really  really long text line that we shall use in order to test the wrapping of text within an option or optgroup lt  option gt           lt option value  08  gt Option 8 lt  option gt           lt option value  09  gt Option 9 lt  option gt           lt option value  10  gt Option 10 lt  option gt       lt  select gt   lt  section gt    Javascript Code    function            testselectset   selectBoxIt           theme   default           defaultText   Make a selection              autoWidth  false               CSS Code   selectboxit-container  selectboxit   selectboxit-container  selectboxit-options       width  400px     Width of the dropdown button        border-radius 0      max-height 100px      selectboxit-options  selectboxit-option  selectboxit-option-anchor       white-space  normal      min-height  30px      height  auto      and you have to add some Jquery Library  select Box Jquery CSS  Jquery Ui Min JS  SelectBox Js   Please check this link JsFiddle Link

User · Answer

An idea could be to use the optgroup  In my case found it better than the disabled approach  It s less confusing for the user than seeing the disabled option I think   lt select id  quot q1 quot  v-model  quot selected quot  v-on change  quot setCPost1 selected  quot  gt     lt option value  quot 0 quot  gt  lt  option gt     lt template     v-for  quot  child  idx  in getLevel1 quot      v-bind value  quot child id quot           gt      lt optgroup v-bind value  quot child id quot   key  quot idx quot     label  quot child label quot    v-if  quot child label line two quot     gt     lt  optgroup gt      lt option v-bind value  quot child id quot   key  quot idx quot   v-if  quot  child label line two quot     gt       child label         lt  option gt      lt option v-bind value  quot child id quot   key  quot idx quot  v-if  quot child label line two quot    style  quot font-style italic quot  gt       child label line two       lt  option gt       lt  template gt   lt  select gt   An external component sounds cool like Vue Select  but I wanted to stick with the native html select at the moment

User · Answer

Instead  maybe try replacing the select with markup  e g    x000D   x000D     Wrap any selects that should be replaced x000D     select replace   wrap   lt div class  select-replacement-wrapper  gt  lt  div gt     x000D   x000D     Replace placeholder text with select s initial value x000D      select-replacement-wrapper   each function     x000D     this  prepend   lt a gt        select option selected   this  text       lt  a gt     x000D      x000D   x000D     Update placeholder text with updated select value x000D     select replace   change function event    x000D      this  siblings  a   text     option selected   this  text      x000D      x000D     Position relative  so that we can overlay the hidden select    x000D   select-replacement-wrapper   x000D    position  relative  x000D    border  3px solid red     to show area    x000D    width  33   x000D    margin  0 auto  x000D    x000D   x000D     Only shows if JS is enabled    x000D   select-replacement-wrapper a   x000D       display  none     x000D       Notice that we ve centered this text -  x000D     you can do whatever you want  mulitple lines wrap  etc   x000D     since this is not a select element     x000D    text-align  center  x000D    display  block  x000D    border  1px solid blue  x000D    x000D   x000D  select replace   x000D    position  absolute  x000D    width  100   x000D    height  100   x000D    top  0  x000D    border  1px solid green  x000D    opacity  0  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt select id  dropdown  class  replace  gt  x000D     lt option value  First  gt First lt  option gt  x000D     lt option value  Second  selected gt Second  and this is a long line  just to show wrapping lt  option gt  x000D     lt option value  Third  gt Third lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

A bit of a hack  but this gives the effect of a multi-line select  puts in a gray bgcolor for your multi line   and if you select any of the gray text  it selects the first of the grouping  Kinda clever I d say     The first option also shows how you can put a title tag in for an option as well    x000D   x000D   function SelectFirst SelVal    x000D     var arrSelVal   SelVal split      x000D     if  arrSelVal length  gt  1    x000D       Valuetoselect   arrSelVal 0   x000D       document getElementById  select1   value   Valuetoselect  x000D       x000D     x000D   lt select name  select1  id  select1  onchange  SelectFirst this value   gt  x000D     lt option value  1  title  this is my long title for the yes option  gt Yes lt  option gt  x000D     lt option value  2  gt No lt  option gt  x000D     lt option value  2 1  style  background  eeeeee  gt  amp nbsp  amp nbsp  amp nbsp This is my description for the no option lt  option gt  x000D     lt option value  2 2  style  background  eeeeee  gt  amp nbsp  amp nbsp  amp nbsp This is line 2 for the no option lt  option gt  x000D     lt option value  3  gt Maybe lt  option gt  x000D     lt option value  3 1  style  background  eeeeee  gt  amp nbsp  amp nbsp  amp nbsp This is my description for Maybe option lt  option gt  x000D     lt option value  3 2  style  background  eeeeee  gt  amp nbsp  amp nbsp  amp nbsp This is line 2 for the Maybe option lt  option gt  x000D     lt option value  3 3  style  background  eeeeee  gt  amp nbsp  amp nbsp  amp nbsp This is line 3 for the Maybe option lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

No  browsers don t provide this formatting option   You could probably fake it with some checkboxes with  lt label gt s  and JS to turn it into a fly out menu

User · Answer

Does not work fully  the hr line part  on all browsers  but here is the solution    x000D   x000D   lt select name  selector  gt  x000D     lt option value  1  gt Option 1 lt  option gt  x000D     lt option value  2  gt Option 2 lt  option gt  x000D     lt option value  3  gt Option 3 lt  option gt  x000D     lt option disabled gt  lt hr gt  lt  option gt  x000D     lt option value  4  gt Option 4 lt  option gt  x000D     lt option value  5  gt Option 5 lt  option gt  x000D     lt option value  6  gt Option 6 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Ok i found a solution   HTML    lt div class  styled-select  gt       lt select class  select-css  gt           lt option disabled selected gt  lt  option gt           lt option gt Apples lt  option gt           lt option gt Bananas lt  option gt           lt option gt Grapes lt  option gt           lt option gt Oranges lt  option gt       lt  select gt       lt span gt How many kg s per week do you expect to be ordering lt  span gt   lt  div gt    CSS     styled-select select select-css   appearance  none     height  80px     pointer-events all     position absolute     top 0     left 0     styled-select       position relative      appearance  none      overflow  hidden      pointer-events none         jQuery       select-css   on  change   function          this  next  span   css  display    none

User · Answer

If you just want a line break in the dropdown list use this    lt option label    value    disabled    gt   lt  option gt

User · Answer

I know this is an older post  but I m leaving this for whomever else comes looking in the future   You can t format line breaks into an option  however  you can use the title attibute 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    lt 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   gt 1 lt  option gt

User · Answer

If you re using select2 you can easily build something to fit the dropdown options and selected option likw below   When your text option is splitted by     lt option value  1  gt Pacheco Fmcia Pacheco 11443322551 lt  option gt    Then your script could be just like this one    lt script type  text javascript  gt      function formatSearch item            var selectionText   item text split               var  returnString       lt span gt     selectionText 0      lt  br gt  lt b gt     selectionText 1      lt  b gt  lt  br gt     selectionText 2     lt  span gt             return  returnString             function formatSelected item            var selectionText   item text split               var  returnString       lt span gt     selectionText 0  substring 0  21     lt  span gt             return  returnString                 select2   select2           templateResult  formatSearch          templateSelection  formatSelected          lt  script gt    The result you can see below

User · Answer

You can use a library called select2  You also can look at this Stackoverflow Question  amp  Answer   lt select id  selectBox  style  width  500px  gt     lt option value  1  data-desc  this is my  lt br gt  multiple line 1  gt option 1 lt  option gt     lt option value  2  data-desc  this is my  lt br gt  multiple line 2  gt option 2 lt  option gt   lt  select gt    In javascript    function          selectBox   select2       templateResult  formatDesc          function formatDesc  opt       var optdesc     opt element  attr  data-desc         var  opt              lt div gt  lt strong gt     opt text     lt  strong gt  lt  div gt  lt div gt     optdesc     lt  div gt              return  opt

[html] Line Break in HTML Select Option?

Examples related to html

Examples related to html-select