22

I searched for a fix for my problem but I can't find one, maybe I don't know how to search this in english since it's not my first language.

Anyway, my problem is that I am trying to use the feature from HTML and one of the options is very loooong and if I leave the without any width passed as style it will destroy the entire website. If I use width it will only show something from the and look as cut. However I saw an example that had "..." in it which I gladly use but I don't know how.

Just to be clear, I am looking for some help to make my look like "Long option ..." or If anyone knows a better way?

Sarah McLachlane
  • 537
  • 4
  • 10
  • 21

6 Answers6

34

Sample HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

Sample CSS:

select{
    width: 100px;
    text-overflow: ellipsis;
}

DEMO - Adding ... to selected value only

Change the width to what ever fits your situation best. Applying text-overflow: ellipsis adds the ... to the text which is longer than the specified width.

This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.

Nope
  • 22,147
  • 7
  • 47
  • 72
  • @DilipRajkumar: I don't have IE8, I'm on IE9 and jsFiddle is all messed up on IE9 when switching to IE8 Browser Mode. I added the HTML and CSS to a new empty web page and tested it in IE9 using Browser Mode and Document Mode in IE8. The styles were always applied correctly. So I assume IE9 running in IE8 compatibility mode is not the same as IE8. I even tried HTML 4.01 as well as HTML 5 `DOCTYPE`s, just in case but nothing. Are you able to share out a link to a site when running in IE8 we can see the issue? – Nope Sep 02 '13 at 20:59
  • Hi @FrançoisWahl thanks for the answer.. I dont have the live link now.. I will give it once the app is in production. CSS trick does not seams to work in IE 8 and less. however it is working perfectly in other browsers. I am trying to find some jquery library to fix this. – Dilip Rajkumar Sep 04 '13 at 10:57
  • 1
    Tested on Chrome 81/Mac and doesn't work. does trim options or add an ellipsis – vsync Jul 15 '20 at 10:58
10

If you're looking for a very simple solution like the one you described (appending ...) then something like this should work for you:-

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

This simply loops over each option and checks its texts length. If it is greater than maxLength it will be shortended to the same length as maxLength and ... will be appended to it.

Here's some example markup to go with it:-

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

Here's a fiddle

billyonecan
  • 20,090
  • 8
  • 42
  • 64
  • yes! thank you however when I click the dropdown I want to see the entire option. Is this possible? – Sarah McLachlane Sep 11 '12 at 14:17
  • @SarahMcLachlane: Your original post is not very clear, you say `Long option ...` but then you want to see the entire option? Do you mean you only want to truncate the selected value and not all the options? In that case, have you tried CSS to just set the with of the select? `select{width: 100px;}`. That changes the width of the dropdown but leaves the options fully extended when dropdown is clicked. – Nope Sep 11 '12 at 14:23
  • I know but I want to add the "..." to the tuncated long value and when I click on the – Sarah McLachlane Sep 11 '12 at 14:38
  • @SarahMcLachlane: I added my answer based on your reply. Let me know if that is what you needed. – Nope Sep 11 '12 at 15:00
3

You could solve this using jQuery and reading this article .

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });
Rosmarine Popcorn
  • 10,761
  • 11
  • 59
  • 89
3

If you set width on the select element, e.g.

select { width: 7em }

the dropdown list will still appear in its natural width.

If some option is very long, then you have a usability problem anyway and you should consider making it shorter or using different controls, like a set of radio button or checkboxes.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I had a select with all the countries, some of which can be very long, setting width as a percentage worked well for my responsive design with a max-width so it didn't become very stretched on huge screens. – dading84 May 09 '16 at 09:12
1

It depends on how you add the options to the select - is it generated with server-side language like PHP/Python/etc? Or it's some JS or its static HTML?

You could use any of those languages to shorten strings (with ... in the end). Here you could find how to do it with js: javascript shorten string without cutting words

If you are more specific and show some code, I could help you accomplish this in your specific case.

Community
  • 1
  • 1
ddinchev
  • 33,683
  • 28
  • 88
  • 133
-1

Changing/Altering select menu using css alone is not possible. I have added a small demo using jquery to simulate the issue with solution.

[Truncating or showing ellipses for Long option value][1]


  [1]: http://jsfiddle.net/xpvt214o/996293/
Mayank Nimje
  • 573
  • 4
  • 16