各位我遇到一个问题，就是给ul li中的内容限制字数，但是火狐不兼容？

各位帮一下忙，ul li 中的内容限制字数，兼容所有浏览器的，是不是的使用JS？

解决方案 »

  1.   

    要用JS的。CSS也有 但是不兼容
      

  2.   


    <ul id="test">
    <li>我是来测试的的饿的我是来测试的的饿的</li>
        <li>我是来测试的的饿的我是来测试的的饿的</li>
        <li>我是来测试的的饿的我是来测试的的饿的</li>
        <li>我是来测试的的饿的我是来测试的的饿的</li>
        <li>我是来测试的的饿的我是来测试的的饿的</li>
    </ul>
    <script type="text/javascript">
        function testAuto(thisId,needLengt){
            var ididid = document.getElementById(thisId).getElementsByTagName("li");
    for(var i = 0; i < ididid.length; i++){
    var nowLeng = ididid[i].innerHTML.length;
    if(nowLeng > needLengt){
    var nowWord = ididid[i].innerHTML.substr(0,needLengt)+'...';
    ididid[i].innerHTML = nowWord;
    }
    }
        } 
    testAuto('test',5)
    </script>
    效果出来了。。但是效率低。期待更好的解决方案
      

  3.   

    needLengt 写错了。。其实我想写成needLength
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯CSS超过宽度显示省略号(www.hemin.cn)</title>
    <style type="text/css">
    *{ margin:0; padding:0; font-size:12px; font-family:"新宋体"}
    ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px}
    li{position:relative; padding:0 60px 0 20px;  height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none}
    li a{ position:relative; background: url(http://www.hemin.cn/blog/wp-content/uploads/2009/10/pot.gif) no-repeat 230px top;word-break:break-all;
    word-wrap:break-word;display:inline-block; text-decoration:none; color:#000; padding-right:12px; margin-right:10px}
    li a:hover{ text-decoration:underline}
    li span{ position:absolute; padding-left:5px; color:#CCC}
    </style>
    </head>
    <body>
    <ol>
    <li><a href="#">杂技团美女演员的训练</a><span>2009-6-21</span></li>
        <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a><span>2009-6-21</span></li>
        <li><a href="#">gghjghkhjkluiisersetrtyrhdukuiuikukuikyukgyu</a><span>2009-6-21</span></li>
        <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a><span>2009-6-21</span></li>
        <li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
        <li><a href="#">练演员的训演员的训练</a><span>2009-6-21</span></li>
        <li><a href="#">练演员的训练演员的训练练</a><span>2009-6-21</span></li>
        <li><a href="#">练演员的练</a><span>2009-6-21</span></li>
        <li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
    </ol>
    </body>
    </html>
    自己研究