html代码

<div class="figcaption"><p>作为微软的游戏平台，Xbox已经出现在了Windows Phone和Windows 8中，就在最近，微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下，Xbox Live服务影响力越来越大，渗透面也越来越广。</p></div>
    
<div class="figcaption"><p>固定一个喜欢的网站可不可以？当然！把每天常去的网站统统固定到开始屏幕中。如何固定？打开 IE10，在网页空白处点击鼠标右键，在应用栏中点击“图钉”图标即可完成固定。</p></div>
    
<div class="figcaption"><p>先前给大家介绍了很好用的 Colors！今天给大家介绍一款风格不同的画画软件——Fresh Paint，我们可以用它画出油画。</p></div>
    
<div class="figcaption"><p>先前给大家介绍了很好用的 Colors！今天给大家介绍一款风格不同的画画软件——Fresh Paint，我们可以用它画出油画先前给大家介绍了很好用的 Colors！今天给大家介绍一款风格不同的画画软件——Fresh Paint，我们可以用它画出油画先前给大家介绍了很好用的 Colors！今天给大家介绍一款画You probably can't do it (currently?) without a fixed-width font like Courier. With a fixed-width font every letter occupies the same horizontal space, so you could probably count the letters and multiply the result with the current font size in ems or exs. Then you would just have to test how many letters fit on one line, and then break it up.</p></div>

css代码

/*注意！父标签的的高度 = p标签的高度 * p的行数*/
.figcaption {
    background: #EEE;
    width: 100%;
    height: 4.5em;
    margin: 1em;
}
.figcaption p {
    margin: 0;
    line-height: 1.5em;
}

jquery

$(".figcaption").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

下面是做过不兼容的写法

-webkit-line-clamp

Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。但是既然被人发现了，而且能用。

p{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}