html：select 内容过多怎么办？

select 内容过多怎么办？

解决方法1：title+（伪）省略号

a,给select添加title

$("select").each(function(){

    var checkText=$(this).find("option:selected").text();//获取下拉框的文本值

    $(this).attr("title",checkText);//修改title值

}

b，获取内容的宽度，当文本超出select的宽度，则+省略号

$("body").append('<div class="content" id="dvCompute"></div>');

function Compute(v) {

    var d = document.getElementById('dvCompute');

    d.innerHTML = v;

    return { w: d.offsetWidth, h: d.offsetHeight };

}

$("select").each(function(){

    var checkText=$(this).find("option:selected").text();//获取下拉框的文本值

    $(this).attr("title",checkText);//修改title值

    var a=$(this).attr('title');//获取select的内容

    var p =Compute(a); //获取内容的宽高

    var width=$(this).width(); //获取select的宽度

    // console.log(p.w + '\n' + p.h);

    if(width<p.w){ //如果文本超出select的宽度，则+省略号

        $(this).parent('.selectli').addClass('omit');

        $(this).parent('.common_byspan').addClass('omit1');

    }else{

        $(this).parent('.selectli').removeClass('omit');

        $(this).parent('.common_byspan').removeClass('omit1');

    }

});

css：

.content{font-size:12px}

#dvCompute{position:absolute;visibility:hidden;}

.omit1:before{

    content: "..."!important;

    width: 14px;

    height: 14px;

    position: absolute;

    right: 19px;

    top: 35%;

    font-size: 12px;

    color: #666;

    line-height: 14px;

    pointer-events: none;

    font-family: 'icomoon' !important;

}