JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option>Not assigned</option>
    <option>No slot</option>
    <option>Make Fred do it</option>
    <option>It's impossible!</option>
    <option>supercalifragilisticexpialidocious</option>
    <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    <option>The Quick Brown Fox jumps over the Lazy Dog.
        
        (extra white space)
        
        The Quick Brown Fox jumps over the Lazy Dog.</option>
</select>

CSS

select {
    margin-top: 50px;
    /* move under Result label */
    width: 150px;
    float: right;
}
option {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

var $select = $('select');

$select
    .on('change', function () {
        var $this = $(this),
            // use replace to remove extra white (if desired)
            txt = $this.find('option:selected').text().replace(/\s+/g, ' ');
        // add title to select
        $this.attr('title', txt);
    })
    .change()
    .find('option').each(function () {
        var $this = $(this);
        // add title to each option, so it works on hover
        $this.attr('title', $this.text());
    });