Question

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

enter image description here

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

select {
    width: 92px;
}

Answer 1

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

这仅适用于Google Chrome。 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

使用CSS执行此操作仅适用于Chrome ...

你不能只使用CSS，但你可以使用一些jQuery 一个“看起来像”的解决方案。

看看我制作的这个快速演示：JSnippet DEMO

你可以看到它的行为就像你想要的那样 - 我正在用DIV包装选择框并添加另一个将与选择框重叠的 - 他将选择框固定宽度减去选择框的按钮。现在我将这个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;        
}
});

它简单而不复杂 - 问题在于选择框元素的行为并在每个浏览器上看起来不同我添加了一个小的快速功能来检测使用哪个浏览器并对其进行微调独特的价值观。

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

什洛莫

Answer 3

在不重新发明轮子的情况下，似乎无法在Firefox中完成此操作。

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

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

太长时间在选择元素换行中创建文本？

3 个答案: