Text-overflow on Select Multiple?

Question

I'm trying to apply a text-overflow on the options of a select with multiple. However, I can't seem to touch the options text.

Here is my HTML:

 <select id="multiselect" multiple="" size="6">

   <option value="123456780123456780123456780123456780123456780123456780" selected="selected">123456780123456780123456780123456780123456780123456780</option>
    <option value="other" selected="selected">other</option>
</select>

And here is my CSS:

#multiselect {
width: 222px;
border-top: 2px solid #ccc;
float: none;
background: #fff;
outline: none;
margin-right: 0;
margin-left: 5px;
border-radius: 0;
margin-bottom: 11px;
overflow: hidden;
text-overflow: ellipsis;
}

#multiselect option {
  overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
 width:222px;
}

I know the text-overflow is repeated when it should (I think) only be applied to the option, but I wanted to demonstrate how it wasn't working in either solution.

Does anyone have any experience with this?

score 1 · Accepted Answer · edited May 23 '17 at 12:27

Unfortunately, I couldn't find a CSS-only solution, so I took some inspiration from this post (not the selected answer, but the other, which is more accurate and handles non-spaced answers) and came up with this JS Loop achieve the goal:

$('#multiselect option').each( function() {
        //Manually make the ellipsis, since CSS3 gets weird with select multiple.
        if (dictionary_length($(this).text()) > 30) {
            $(this).text($.trim($(this).text()).substring(0, 28).trim(this) + "...");
        }
    });

score 1 · Answer 2 · edited Jun 05 '13 at 00:27

1

Move your white-space: nowrap up onto the select itself, not just the options.

Worked for me!

edited Jun 05 '13 at 00:27

HamZa

14,671
11
54
75

answered Jun 05 '13 at 00:08

gekido

31
3

score 1 · Answer 3 · answered May 15 '18 at 11:59

1

This styling worked for me with SCSS:

select {
  width: 100%;
  option {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

answered May 15 '18 at 11:59

danday74

52,471
49
232
283

Text-overflow on Select Multiple?

3 Answers3