85

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 <select> elements (at least in Chrome).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

Example here: http://jsfiddle.net/t5eUe/

Nick Grealy
  • 24,216
  • 9
  • 104
  • 119
pepsi
  • 6,785
  • 6
  • 42
  • 74

9 Answers9

46

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:

enter image description here

After:

enter image description here

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/

Deanna
  • 23,876
  • 7
  • 71
  • 156
Alex W
  • 37,233
  • 13
  • 109
  • 109
45

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.

s4y
  • 50,525
  • 12
  • 70
  • 98
  • but this does not work for me. I've used it `textOverflow` in reactjs for ` – itiDi Oct 28 '21 at 04:27
10

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;
}
nempoBu4
  • 6,521
  • 8
  • 35
  • 40
Hariharasudan
  • 109
  • 1
  • 2
9

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.

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>
pbyrne
  • 553
  • 2
  • 8
  • 4
    Not sure why you got downvoted so hard, but this is a reasonable solution. May not be ideal, but still a decent solution. – adamj Nov 05 '15 at 04:13
  • 1
    @adamj Probably down-voted because he suggested a solution specific to Rails when the question was asked about an HTML, CSS solution independent of rendering, templating or server. – shadowcursor Feb 03 '17 at 20:31
  • 1
    @mohamed.ahmed Well, he did say the following.. `[...] and I'm certain that whichever backend you're using provides something similar.` And most languages do have a `truncate` method, so his solution is still reasonable. – adamj Feb 06 '17 at 04:56
  • 9
    The solution is still pretty poor, because in many cases you will have a responsive layout and the width of form fields may vary. Why would you want to truncate the option to a handfull characters when the field is 200px wide on a HD screen (just as an example)? – lxg Jan 09 '18 at 12:36
4

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:

var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";

selectContainer.dataset.content = select.value;

function handleChange(e) {
  selectContainer.dataset.content = e.currentTarget.value;
  console.log(select.value);
}

select.addEventListener("change", handleChange);
span {
  margin: 0 10px 0 0;
}

.select-container {
  position: relative;
  display: inline-block;
}

.select-container::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  padding: 7px;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
  pointer-events: none;
}

.select {
  width: 80px;
  padding: 5px;
  appearance: none;
  background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
  background-size: 10px 10px;
  color: transparent;
}

.regular {
  display: inline-block;
  margin: 10px 0 0;
  .select {
    color: #000;
  }
}
<span>Hack:</span><div class="select-container" data-content="">
  <select class="select" id="words">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>
<br />

<span>Regular:</span>
<div class="regular">
  <select style="width: 80px;">
    <option value="lingua latina non penis canina">Lingua latina non penis canina</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option value="dolor">Dolor</option>
    <option value="sit">Sit</option>
    <option value="amet">Amet</option>
    <option value="lingua">Lingua</option>
    <option value="latina">Latina</option>
    <option value="non">Non</option>
    <option value="penis">Penis</option>
    <option value="canina">Canina</option>
  </select>
</div>
Will P.
  • 8,437
  • 3
  • 36
  • 45
3

** HTML ex. **

<select id="selectDropdownID">
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

CSS file

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

JS file

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});
chri3g91
  • 1,196
  • 14
  • 16
2

I used this approach in a recent project and I was pretty happy with the result:

.select-wrapper {
    position: relative;
    &::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.

enter image description here

David Jones
  • 10,117
  • 28
  • 91
  • 139
2

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

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
1

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 > maxLength) {
        $(ddlID).attr('data-toggle', "tooltip")
                .attr('title', selectedOption);

        if (allowDots) {
            $(ddlID).prev('sup').remove();
            $(ddlID).before(
            "<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;'>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr('title') != null) {
        $(ddlID).removeAttr('data-toggle')
                .removeAttr('title');
    }
}
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Mohammad Abdalhaleem
  • 37
  • 5