Why does selecting an option within a select shorten the option's text?

Question

I am running this code snippet on Chrome. As you can see, I have a select multiple element with a horizontal scrollbar. The text overflows so it causes it to scroll. However, when you select a particular option, and scroll right, it truncates the text of the selected option.

That is, the text gets shortened to THIS IS A VERY LONG OPTION THIS IS A VERY L.

Why is this, and how can I prevent it from happening?

select {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

or this https://stackoverflow.com/questions/31502259/html-select-truncates-text-on-click-using-google-chrome — Jarlik Stepsto, Apr 26 '19 at 20:39

score 2 · Accepted Answer · answered Apr 26 '19 at 20:37

Its the website default style i gusse.

You could fix this by changing the select option to display as table

This may not provide the full answer to your question, but able to help you understand the problem and also give you a solution for it.

select {
  height: 200px;
  width: 260px;
  overflow-x: scroll;
}

select >option{
 display:table;
}

<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

@ktm5124 `float:left` will also do the job – Temani Afif Apr 26 '19 at 21:09 — Temani Afif, Apr 26 '19 at 21:09

score 1 · Answer 2 · answered Apr 26 '19 at 20:41

The user agent styling applies white color to the options when they are selected. This works on the blue background that's also applied, but the background only extends to the size of the option element, which doesn't scale to the text size.

One workaround is to add the scroll bars to a div container instead of the select.

select.v1 {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

.v2 {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

.v2 select {
  overflow: hidden;
  height: 100%;
}

option {
  outline: 1px solid black;
}

<select multiple class="v1">
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

<div class="v2">
  <select multiple>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
    <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  </select>
</div>

Why does selecting an option within a select shorten the option's text?

2 Answers2