多行文本溢出省略

HTML

<div class="a">
	<span>
		<div class="figure"><img src="http://www.gbtags.com/gb/laitu/240/dd4814/ffffff" alt=""></div>
		<p>超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略</p>
	</span>
	<span>
		<div class="figure"><img src="http://www.gbtags.com/gb/laitu/240/dd4814/ffffff" alt=""></div>
		<p>超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略超出省略</p>
	</span>
	<span>
		<div class="figure"><img src="http://www.gbtags.com/gb/laitu/240/dd4814/ffffff" alt=""></div>
		<p>超出省略超出省略超出省略超出省略超出省略</p>
	</span>
	<span>
		<div class="figure"><img src="http://www.gbtags.com/gb/laitu/240/dd4814/ffffff" alt=""></div>
		<p>超出省略超出省略超出省略超出省略超出省略</p>
	</span>
</div>

CSS

*{margin: 0;padding: 0;width: 100%;}
.a{display: table;width: 1000px;margin:100px auto;}
.a span{display: table-cell;width: 240px;border: 1px solid #000;float: left;padding:4px;}
.a p{height:40px;font:14px/20px "微软雅黑";position: relative;width: 240px;overflow: hidden;zoom:1;}

JavaScript

$(document).ready(function(){
    //限制字符个数
    $(".a p").each(function(){
        var maxwidth=32;
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+'...');
        }
    });
});