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

johnderm 2011-12-30 05:01:13

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

...全文

186 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

johnderm 2011-12-30

打赏
举报

可以了，谢谢你，又帮了我，真想给你个拥抱，呵呵，我结贴了，

jy02409187 2011-12-30

打赏
举报

<!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>2009-6-21</li>
<li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a>2009-6-21</li>
<li><a href="#">gghjghkhjkluiisersetrtyrhdukuiuikukuikyukgyu</a>2009-6-21</li>
<li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练</a>2009-6-21</li>
<li><a href="#">练演员的训练</a>2009-6-21</li>
<li><a href="#">练演员的训演员的训练</a>2009-6-21</li>
<li><a href="#">练演员的训练演员的训练练</a>2009-6-21</li>
<li><a href="#">练演员的练</a>2009-6-21</li>
<li><a href="#">练演员的训练</a>2009-6-21</li>
</ol>
</body>
</html>

自己研究

luliangshu350 2011-12-30

打赏
举报

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

luliangshu350 2011-12-30

打赏
举报



<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>

效果出来了。。但是效率低。期待更好的解决方案