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;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="viewport"></div>
        <select name="example" id="example">
            <option value="">This is some longggggggggggggggggggggggggggggggg text</option>
            <option value="">Short Text</option>
            <option value="">This is some really,really long text text and text</option>
        </select>
    </div>

Answer 2

This is code for setting title display Option text

$(function(){
              $("select option").attr( "title", "" );
              $("select option").each(function(i){
                this.title = this.text;

              })
            });
            $("select").tooltip({
                left:25
            });

Answer 3

In here, you may not be able to find cross browser compatible solution. Since select option element cannot be style as usual. So if you can do this grammatically it will be safe.