css 多行换行溢出隐藏 兼容ie8
<html>
<head>
<meta charset="utf-8" />
<style>
#box{
padding:0;
}
#box>li{
list-style: none;
width: 200px;
word-wrap: break-word;
word-break: break-all;
color: darkcyan;
padding: 10px 0;
}
#w1{
width:200px;height:30px;background:red;
}
#w2{
display:inline-block;
}
</style>
</head>
<body>
<div>
<div >
<ul id="box"></ul>
</div>
<div id='w1'></div>
<span id='w2'></span>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var w1Sel = $('#w1');
var w1 = $('#w1').width();
var s2Sel = $('#w2');
function getW2 (){
return s2Sel.width();
}
function mySel (name,num){
this.text = name;
this.num = num;
this.ht = function (){
return '<li>'+this.getText(this.text)+'</li>'
};
this.getText = function (str){
for(var i=0;i<str.length;i++){
if(getW2() > w1*this.num){
s2Sel.text('');
return str.substr(0,i-2-this.num)+'...';
}
console.log(str.substr(0,i+1));
s2Sel.text(str.substr(0,i+1));
}
}
}
var arr = ['111ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDFascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDFascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF','222222222ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF','33333333ascDdASFVASDFASFA的水电费a--撒手动阀ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF',
'444444ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF',
'555555ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收ascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDFascDdASFVASDFASFA的水电费a--撒手动阀撒地方撒收到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF到SDFSDFDSAFDSAFADSFASFADSFSDAFFADSFADSFADSFADFASDFASFDSFSADFDF'];
for(var j=0;j<5;j++){
$('#box').append(new mySel(arr[j],2).ht());
}
</script>
</body>
</html>