<!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书写,代码非常精简