JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
A long option that gets cut off
</div>
<select>
<option>One - A long option that gets cut off</option>
<option class="selected" selected>Two - A long option that gets cut off</option>
</select>
CSS
select, option.selected {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
JavaScript
$('select').on('change',function(){
$(this).find('option').removeClass('selected');
$(this).find('option:selected').addClass('selected');
});