body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<a href="#">more</a>

<script language="javascript">
var max = 0;
var maxline = 3;
// init
$(function(){
    max = $("ul>li").size() > maxline ? maxline - 1 : $("ul>li").size() - 1;
    $("ul>li").eq(max).nextAll("li").hide();
});
// click more link
$("a").toggle(function(){
    $("ul>li").eq(max).nextAll("li").show();
},function(){
    $("ul>li").eq(max).nextAll("li").hide();
});
</script>
</body>

------解决方案--------------------
http://www.cnblogs.com/littledu/articles/2034959.html 这里面有事例可以参考，用的是jquery和js。