如果太长，在选择元素中包含文本？

问题描述：

我有一个选择列表，其中的选项中的文本太长，因为正在裁剪。是否有可能使文本换行，使所有的东西都可见？

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?

http://jsfiddle.net/W4KG7/

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

select {
    width: 92px;
}

答

只能在Chrome中使用...

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

你不能使用CSS，但是你可以使用一些jQuery的
a看起来像的解决方案。

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

查看我所做的快速演示： JSnippet DEMO

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

看到它的行为像你想要的 - 我包装选择框与 DIV
并添加另一个将重叠的选择框 - 他选择框固定宽度减
选择框的按钮。现在我分配给这个div与选择框相同的外观+
选择的值。

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.

这是jQuery代码：

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

如果太长，在选择元素中包含文本？

相关推荐