CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23593

Make text in select element wrap when too long?

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?

enter image description here

http://jsfiddle.net/W4KG7/

<select>
    <option>This is option 1</option>
    <option>This is option 2</option>
</select>

select {
    width: 92px;
}

Upvotes: 5

Views: 44051

Answers (4)

Shawn Reeves
Shawn Reeves

Reputation: 36

Came here looking for an answer, figured a non-CSS solution, where we split the text into multiple options with duplicated values, which I will be doing with PHP:

<select name="list">
<option value="1">First half of long line</option>
<option value="1">__and the second half</option>
<option value="2">Short line</option>

Upvotes: 0

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

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.

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

Upvotes: 2

Vic Seedoubleyew
Vic Seedoubleyew

Reputation: 10556

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

Upvotes: 4

mr_greb
mr_greb

Reputation: 208

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

Upvotes: 5

Related Questions