当选择元素中的文本过长时，如何使其换行？

Question

我有一个选择列表，其中选项中的文本太长，因此被裁剪了。是否可以使文本换行，以便所有文本都可见？

http://jsfiddle.net/W4KG7/

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

select {
    width: 92px;
}

- Evanss

Answer 1

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

这似乎只适用于Google Chrome浏览器。 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

- mr_greb

---

啊，抱歉，这显然只是Chrome的事情。 - mr_greb

这在火狐浏览器中不起作用 https://bugzilla.mozilla.org/show_bug.cgi?id=422128 - Arbel

Answer 2

看起来在Firefox中没有办法完成这个任务而不需要重新发明轮子。

我想出的解决方案可以在其他浏览器中实现，并在Firefox中使用省略号：

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

- Vic Seedoubleyew

Answer 3

使用CSS只能在Chrome中实现这一点...

仅使用CSS无法做到，但您可以使用一些jQuery来模拟解决方案。

正如您所看到的，它的行为与您想要的相同-我用

包装了选择框，并添加了另一个选择框的重叠部分-他取选择框固定宽度减去选择框的按钮。现在，我将为此div分配与选择框相同的外观+所选值。

每次更改选择框时，新值将设置在我们创建的掩码中，并且计算出的新高度也将设置为选择框。

以下是jQuery代码：

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

这很简单，问题在于每个浏览器对选择框元素的行为和外观都不同。我添加了一个小的快速函数来检测使用的浏览器并微调其唯一值。

这种方法可以改进，但这是一个不错的起点。

Shlomo

- Shlomi Hassid