Ellipsis for overflow text in dropdown boxes

Question

I m fixing the width of one of my dropdown boxes  yes I know there are cross-browser issues with doing this    Is there a non-js way to cut off overflowing text and append ellipses  text-overflow ellipsis doesn t work for  lt select gt  elements  at least in Chrome     x000D   x000D  select  div   x000D      width 100px   x000D      overflow hidden   x000D      white-space nowrap   x000D      text-overflow ellipsis  x000D    x000D   lt  --works for a div-- gt  x000D   lt div gt  x000D      A long option that gets cut off x000D   lt  div gt  x000D   x000D   lt  --but not for a select-- gt  x000D   lt select gt  x000D       lt option gt One - A long option that gets cut off lt  option gt  x000D       lt option gt Two - A long option that gets cut off lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Example here  http   jsfiddle net t5eUe

User · Accepted Answer

NOTE  As of July 2020  text-overflow  ellipsis works for  lt select gt  on Chrome HTML is limited in what it specifies for form controls  That leaves room for operating system and browser makers to do what they think is appropriate on that platform  like the iPhone   s modal select which  when open  looks totally different from the traditional pop-up menu   If it bugs you  you can use a customizable replacement  like Chosen  which looks distinct from the native select  Or  file a bug against a major operating system or browser  For all we know  the way text is cut off in selects might be the result of a years-old  oversight that everyone copied  and it might be time for a change

User · Answer

CSS file   selectDD    overflow  hidden   white-space  nowrap   text-overflow  ellipsis           JS file    document  ready function              selectDropdownID   next   children   eq 0  addClass  selectDD

User · Answer

You can use this   select       width 100px       overflow hidden       white-space nowrap       text-overflow ellipsis    select option       width 100px      text-overflow ellipsis      overflow hidden    div       border-style solid       width 100px       overflow hidden       white-space nowrap       text-overflow ellipsis

User · Answer

Found this absolute hack that actually works quite well   https   codepen io nikitahl pen vyZbwR  Not CSS only though     The basic gist is to have a container on the dropdown   select-container in this case   That container has it s   before set up to display content based on its data-content attribute dataset  along with all of the overflow hidden  text-overflow  ellipsis  and sizing necessary to make the ellipsis work   When the select changes  javascript assigns the value  or you could retrieve the text of the option out of the select options list  to the dataset content of the container  and voila   Copying content of the codepen here    x000D   x000D  var selectContainer   document querySelector   select-container    x000D  var select   selectContainer querySelector   select    x000D  select value    lingua latina non penis canina   x000D   x000D  selectContainer dataset content   select value  x000D   x000D  function handleChange e    x000D    selectContainer dataset content   e currentTarget value  x000D    console log select value   x000D    x000D   x000D  select addEventListener  change   handleChange   x000D  span   x000D    margin  0 10px 0 0  x000D    x000D   x000D   select-container   x000D    position  relative  x000D    display  inline-block  x000D    x000D   x000D   select-container  before   x000D    content  attr data-content   x000D    position  absolute  x000D    top  0  x000D    right  10px  x000D    bottom  0  x000D    left  0  x000D    padding  7px  x000D    font  11px Arial  sans-serif  x000D    white-space  nowrap  x000D    text-overflow  ellipsis  x000D    overflow  hidden  x000D    text-transform  capitalize  x000D    pointer-events  none  x000D    x000D   x000D   select   x000D    width  80px  x000D    padding  5px  x000D    appearance  none  x000D    background  transparent url  https   cdn4 iconfinder com data icons ionicons 512 icon-arrow-down-b-128 png   no-repeat calc   100  - 5px   7px  x000D    background-size  10px 10px  x000D    color  transparent  x000D    x000D   x000D   regular   x000D    display  inline-block  x000D    margin  10px 0 0  x000D     select   x000D      color   000  x000D      x000D    x000D   lt span gt Hack  lt  span gt  lt div class  select-container  data-content    gt  x000D     lt select class  select  id  words  gt  x000D       lt option value  lingua latina non penis canina  gt Lingua latina non penis canina lt  option gt  x000D       lt option value  lorem  gt Lorem lt  option gt  x000D       lt option value  ipsum  gt Ipsum lt  option gt  x000D       lt option value  dolor  gt Dolor lt  option gt  x000D       lt option value  sit  gt Sit lt  option gt  x000D       lt option value  amet  gt Amet lt  option gt  x000D       lt option value  lingua  gt Lingua lt  option gt  x000D       lt option value  latina  gt Latina lt  option gt  x000D       lt option value  non  gt Non lt  option gt  x000D       lt option value  penis  gt Penis lt  option gt  x000D       lt option value  canina  gt Canina lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   lt br   gt  x000D   x000D   lt span gt Regular  lt  span gt  x000D   lt div class  regular  gt  x000D     lt select style  width  80px   gt  x000D       lt option value  lingua latina non penis canina  gt Lingua latina non penis canina lt  option gt  x000D       lt option value  lorem  gt Lorem lt  option gt  x000D       lt option value  ipsum  gt Ipsum lt  option gt  x000D       lt option value  dolor  gt Dolor lt  option gt  x000D       lt option value  sit  gt Sit lt  option gt  x000D       lt option value  amet  gt Amet lt  option gt  x000D       lt option value  lingua  gt Lingua lt  option gt  x000D       lt option value  latina  gt Latina lt  option gt  x000D       lt option value  non  gt Non lt  option gt  x000D       lt option value  penis  gt Penis lt  option gt  x000D       lt option value  canina  gt Canina lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The simplest solution might be to limit the number of characters in the HTML itself  Rails has a truncate string  length  helper  and I m certain that whichever backend you re using provides something similar   Due to the cross-browser issues you re already familiar with regarding the width of select boxes  this seems to me to be the most straightforward and least error-prone option    lt select gt     lt option value  1  gt One lt  option gt     lt option value  100  gt One hund    lt  option gt   lt select gt

User · Answer

quirksmode has a good description of the  text-overflow  property  but you may need to apply some additional properties like  white-space  nowrap   Whilst I m not 100  how this will behave in a select object  it could be worth trying this first   http   www quirksmode org css textoverflow html

User · Answer

You can use this jQuery function instead of plus Bootstrap tooltip  function DDLSToolTipping ddlsArray          ddlsArray  each function  index  ddl            DDLToolTipping ddl             function DDLToolTipping ddlID  maxLength  allowDots        if  maxLength    null    maxLength   12       if  allowDots    null    allowDots   true        var selectedOption     ddlID  find  option selected   text         if  selectedOption length  gt  maxLength              ddlID  attr  data-toggle    tooltip                    attr  title   selectedOption            if  allowDots                  ddlID  prev  sup   remove                  ddlID  before                lt sup style  font-size  9 5pt position  relative top  -1px left  -17px z-index  1000 background-color   f7f7f7 border-radius  229px font-weight  bold color   666   gt     lt  sup gt                                         else if    ddlID  attr  title      null              ddlID  removeAttr  data-toggle                    removeAttr  title

User · Answer

If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow  I found a solution that works in some browsers  Just add some padding  to the select  on the right side   Before     After     CSS   select       padding 0 30px 0 10px  important      -webkit-padding-end  30px  important      -webkit-padding-start  10px  important      iOS ignores the padding properties but uses the -webkit- properties instead   http   jsfiddle net T7ST2 4

User · Answer

I used this approach in a recent project and I was pretty happy with the result    select-wrapper       position  relative       amp   after           position  absolute          top  0          right  0          width  100px          height  100           content              background  linear-gradient to right  transparent  white           pointer-events  none            Basically  wrap the select in a div and insert a pseudo element to overlay the end of the text to create the appearance that the text fades out

[html] Ellipsis for overflow text in dropdown boxes

Examples related to html

Examples related to css