<html>
<head>
<style>
select {
width: 100%;
font: bold 100px/1 "Helvetica Neue", sans-serif;
appearance: none;
padding: 20px 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<style>
</head>
<select>
<option>Some text is longer than it's advised to be</option>
</select>
</html>
How can make to work with text ellipsis on select element?
Thanks
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:
