这几天写页面的时候有一个需求:规定一个容器的宽和高,里面的文字,超出部分显示省略号。收索和求救后将代码和大家一起分享
在网上看到一个:
<script type="text/javascript">
(function(){
var txt = 50;//设置留下的字数
var o = document.getElementById("cla");//id html 中设置
var s = o.innerHTML;
var p = document.createElement("span");
var n = document.createElement("font");
p.innerHTML = s.substring(0,txt);
n.innerHTML = s.length > txt ? "..." : "";
o.innerHTML = "";
o.appendChild(p);
o.appendChild(n);
})();
</script>
后来群里面一大神稀饭发了一个demo给我参考:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>demo</title>
</head>
<style type="text/css" media="screen">
ul { 200px}
li { list-style: none; margin:20px;}
</style>
<body>
<ul>
<li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。</li>
<li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,</li>
<li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,有些地方房地产价</li>
<li class="aaa">成思危表示,中国的房地产模式以及中国城镇化进程的推进,决定了房地产业未来走势。不过他也表示,</li>
</ul>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('.aaa').each(function(){//这边也可以直接用li之类的标签
var maxLength=25;
if($(this).text().length>maxLength){
$(this).text($(this).text().substring(0,maxLength));
$(this).html($(this).html()+'…');
}
});
});
</script>
</body>
</html>
稀饭大神这个代码经测试ie9以上,ff,chroom均通过。原生js代码在ie,ff,chroom下均通过,但我不知道怎么换成class名