Make text in select element wrap when too long?

Question

I have a select list where the text within the options is too long as is getting cropped. Is it possible to make the text wrap instead so that all of it is visible?

Answer 1

Using CSS to do this will only work in Chrome...

You can't do it just by using CSS, but you can use some jQuery for a "look like" solution.

Take a look at the this quick demo I made: JSnippet DEMO

As you can see it behaves like you wanted - I'm wrapping the select box with a DIV and adding another one that will overlap the select box - he takes the select box fixed width minus the button of the select box. Now I'm assigning to this div the same appearance as the select box + The selected value.

Every time the select box will be changed the new value will be set in the mask we created and the calculated new height will be set to the select box to.

Here is the jQuery code:

$(function(){
var mYbrowser = detectBrows();
console.log(mYbrowser[0]);
$('select').each(function(index,ele){

    //get current style and fixed width:
    var renderWidth = $(ele).outerWidth();
    var renderWidthFixed = renderWidth;
    var borderstyle = $(ele).css("border-bottom-style");
    var bordercolor = $(ele).css("border-bottom-color");
    var borderwidth = $(ele).css("border-bottom-width");
    var font = $(ele).css("font");
    var defaultValue = $(ele).val();
    if (borderwidth == "0px") { borderwidth = "1px"; /*FF*/ }
    $(ele).css({ cursor:"pointer" });

    // set by browser (different buttons):
    var borderRightParsed = borderwidth +" " + borderstyle + " " + bordercolor;
    var topParsed = Math.round(parseInt(borderwidth.replace(/[^0-9\.]+/g,"")));
    switch(mYbrowser[0]) {
            case "MSIE": renderWidthFixed = renderWidth-28; break;
            case "I": renderWidthFixed = renderWidth-28; break;                 
            case "Chrome": renderWidthFixed = renderWidth-30; break;
            case "Firefox": 
                            renderWidthFixed = renderWidth-27; 
                            borderRightParsed= "0"; 
                            if (index > 0) topParsed++;
                            break; 
    }
    //wrap + add a overlapping layer that will hide content and calculate the correct height:
    $(ele).wrap($('<div />').css({width:renderWidth, margin:0, padding:0, position:"relative"}));
    $(ele).after($("<div>" + defaultValue + "</div>")
                   .css({
                       minHeight:20,
                       padding:"5px 0px 5px 8px",
                       width:renderWidthFixed,
                       backgroundColor:"white",
                       whiteSpace:"pre-wrap",
                       position:"absolute",
                       borderRight:borderRightParsed,
                       top:topParsed,
                       cursor:"default",
                       left:borderwidth,
                       font:font
                   })
                );
    //set select box new height:
    setHeight(ele);

    //append change behavior:
    $(ele).change(function(){
        $(ele).next('div').text($(ele).val());
        setHeight(ele);
    });

});

function setHeight(ele) {
    var newHeight = $(ele).next('div').outerHeight();
    $(ele).height(newHeight);

}

function detectBrows(){
    var ua= navigator.userAgent, tem, 
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        if(M[1]=== 'Chrome'){
            tem= ua.match(/\bOPR\/(\d+)/)
            if(tem!= null) return 'Opera '+tem[1];
        }
        M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
        return M;        
}
});

Its simple and not complicated - the problem is that the select box element behave and look different on each browser. I added a small quick function to detect which browser is used and fine tuning his unique values.

This method can be Improved but that's a good starting point.

Shlomo

Answer 2

select {
    width: 92px;
    white-space:pre-wrap;
}

This only appears to work in Google Chrome. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 3

It seems there is no way to accomplish this in Firefox without reinventing the wheel.

The solution I have come up with achieves this for other browsers, and uses an ellipsis in Firefox:

select {
    max-width: 100%;
    white-space: normal;
    /* For Firefox: */
    text-overflow: ellipsis;
}