控制文本长度

这几天写页面的时候有一个需求:规定一个容器的宽和高,里面的文字,超出部分显示省略号。收索和求救后将代码和大家一起分享

在网上看到一个:

<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 { width: 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名

 

posted @ 2014-04-03 20:46  人生不过百余年  阅读(183)  评论(0编辑  收藏  举报