html如何设置select文字过长时已省略号显示

出现以下问题:当option中文字过长时,select中的文字显示不全,想实现最后以省略号显示.
问题如图:

在样式里面加几个属性设置：
例：
.selectClass{
width : 100px;
border : 1px #12a3e4 solid;
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}

补充： 不设置width, white-space不生效

用框架,用插件,如果一个插件解决不了,就用两个

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('

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

在后端构造数据时，可以截取后添加省略号。