JSFiddle - React, Tailwind, and code Playground

by digitalextremist

HTML

<html>
    <!--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>
</html>

CSS

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap;
    /* text-overflow: ellipsis; */
}

div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap;
    /* text-overflow: ellipsis; */
}