Ellipsis for overflow text in dropdown boxes

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/

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/

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.

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>

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;
}

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>

** 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");
});

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

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.

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');
    }
}