How to make text-overflow on select element

select {
  width: 100%;
  font: bold 100px/1 "Helvetica Neue", sans-serif;
  appearance: none;
  padding: 20px 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  <option>Some text is longer than it's advised to be</option>

How can make to work with text ellipsis on select element?


Any idea?? Because I try search a lot but…

I don’t think there is any way you can consistently get this to work across browsers without using hacks (or replacing the <select> with a [normally] JS-powered component that works in the same way). That’s for sensible reasons, because you’re trying to break how it’s supposed to work – you’re going to make options impossible to read, so most browsers will block you from doing it. For example, on browsers in Android there’s nothing you can do to override this: