Text Cutting Inside Large Select Option Dropdown

HTML Select cutting text off

Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):

$('select').append(' ');

Forces the select to be redrawn.

Text gets cut when using select

Firstly remove the height: 23px; declaration.

Notice the the text is not cut anymore, however the elements have a greater height than what was needed.

To fix this, just change the padding to padding: 6px 10px;

FIDDLE

input,
select {
  box-sizing: content-box;
  width: 90%;
  padding: 6px 10px;
  font-family: TheBoldFont;
  font-size: 27px;
  color: #f26e7c;
  border: 4px solid black;
  border-radius: 12px;
}

<input type="text" value="xxxxxxx">

<select>
  <option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>

HTML Dropdown (select) with Text Wrap and Border after every value (option)

select {  width: 100px;  overflow: hidden;  white-space: pre;  text-overflow: ellipsis;  -webkit-appearance: none;}
option {  border: solid 1px #DDDDDD;}

<select name="d" class="myselect">  <option value="sdf" class="test1"> line text How to wrap the big line text </option>  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>  <option value="sdf4" class="test1"> line text How to wrap the big line text </option></select>

Select dropdown with fixed width cutting off content in IE

For IE 8 there is a simple pure css-based solution:

select:focus {
    width: auto;
    position: relative;
}

(You need to set the position property, if the selectbox is child of a container with fixed width.)

Unfortunately IE 7 and less do not support the :focus selector.

html select dropdrown width is too big

Sample HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

Sample CSS:

select{
    width: 100px;
    text-overflow: ellipsis;
}

DEMO - Adding ... to selected value only

Change the width to what ever fits your situation best. Applying text-overflow: ellipsis adds the ... to the text which is longer than the specified width.

This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.

If select option text length is greater than 10 then trim jQuery

You can do this:

$('select').change(function(){
    if(this.value.length >= 10){ 
        console.log('long title');

        //trimming
        var trim = $.trim(this.value).substring(0, 10) + "...";
        alert(trim);

        //Set the text in the select
        $(this).find("option:selected").text(trim);
    }
});

Demo: http://jsfiddle.net/yjeAN/3/

Ellipsis for overflow text in dropdown boxes

NOTE: As of July 2020, text-overflow: ellipsis works for <select> 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.