<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
#view{
width:300px;
height:50px;
border:1px solid red;
margin:200px auto;
overflow: hidden
}
#view li{
width: 300px;
height:50px;
line-height: 50px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="view">
<ul id="list">
<li>学生遭绑架后遇害学生遭绑架后遇害女子遭家暴流产</li>
<li>女子遭家暴流产女子遭家暴流产</li>
<li>男子冒充校花骗财女子遭家暴流产女子遭家暴流产</li>
<li>宁波一工地爆炸将孩子甩床上</li>
<li>男子获刑472年章子怡现身母校</li>
</ul>
</div>
</body>
<script>
var time
function Loop(){
time=setInterval(function(){
$("#list").animate({marginTop:-50},1000,function(){
$("#list li:last").after($("#list li:first"));
$("#list").css("marginTop",0)
})
},2000)
}
Loop();
$("#view").hover(function(){
clearInterval(time);
},function(){
Loop();
})
</script>
</html>
文字溢出隐藏，一行显示，多余部分变为省略号
overflow: hidden;text-overflow:ellipsis;
white-space: nowrap;
用jquery书写，代码非常精简