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 like this

<select id ="id">
        <option>One - A long text need to be cut off with ellipsis</option>
        <option>Two - A long text need to be cut off with ellipsis</option>
</select>

I am expecting the output like as follows

One - A long option.... Two - A long option....

when clicking the ellipses able to see the full option values like One - A long text need to be cut off with ellipsis

Please see the code which I done so far

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
select {
    width:200px;
}
</style>
<script>
$(document).ready(function() {
var maxLength = 20;
    $('#example > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
        }
    });
});
</script>
</head>
<body>
<select name="example" id="example">
    <option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
    <option value="">91 Western Road,Brighton PO Box 7169 East Sussex England BN1 2NWL</option>
    <option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
</select>
</body>
</html>

Please help me to get the expected result as above

unless you use a fixed-width font, counting chars won't help you fill the width... css does have and overflow: ellipsis, and you can set a width to OPTIONs — dandavis, Oct 29 '14 at 08:45
Your jquery script is working, see [this](http://jsfiddle.net/db5SX/2747/) — Bhushan Kawadkar, Oct 29 '14 at 08:52
You can't do that. Usually options cannot be style. So you have to create custom options if you want to do this. — Nishan Senevirathna, Oct 29 '14 at 09:15
Hi Bhushan, Thanks for your prompt reply; It is working in JSFiddle but it do not working for me in any browser. — venkat, Oct 29 '14 at 09:50
I missed to add this script After adding this it is working in IE and chrome it is not working in firefox. Thanks a lot — venkat, Oct 29 '14 at 10:20
Possible duplicate of [Ellipsis for overflow text in dropdown boxes](http://stackoverflow.com/questions/7289769/ellipsis-for-overflow-text-in-dropdown-boxes) — Gaurav Aggarwal, May 25 '16 at 06:05

score 9 · Answer 1 · answered Oct 29 '14 at 09:54

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>

score 0 · Answer 2 · edited Dec 06 '17 at 16:29

0

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

edited Dec 06 '17 at 16:29

WhatsThePoint

3,395
8
31
53

answered Dec 06 '17 at 08:08

Sarah

1

score -1 · Answer 3 · answered Oct 29 '14 at 09:24

-1

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.

answered Oct 29 '14 at 09:24

Nishan Senevirathna

709
5
12

set dropdown list option with ellipses

3 Answers3

Linked