set dropdown list option with ellipses

Question

I want to add ellipsis in the dropdown list options if I click the ellipsis able to see the full option values

for example, dropdown list looking li

Answer 1

Here is my solution for you problem.

Its a workaround with the target to ellipse the select value and show the hole text when the options are shown. So the user can read the option values.

$(document).ready(function () {
            $('div.viewport').text($('#example')[0].textContent);
            $('#example').change(function () {
                $('div.viewport').text($("option:selected", this).text());
            });            
        });

 select, .container {
            width: 100px;
            z-index: 2;
            position: relative;
        }

        select {
            color: transparent;
            background: none;
        }

        .container {
            position: relative;
        }

        .viewport {
            position: absolute;
            width: 80%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            font-size: 14px;
            padding: 3px;
        }

        option {
            color: black;
        }

        

        
            This is some longggggggggggggggggggggggggggggggg text
            Short Text
            This is some really,really long text text and text