跨浏览器解决多行文本溢出显示省略号

原文链接：http://jsfiddle.net/Cople/DrML4/5/

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

.figcaption {
    background: #EEE;
    width: 410px;
    height: 4.5em;/*设置三行显示的话，height需要是line-height的3倍*/
    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)(\.\.\.)?$/, "..."));
    };
});

 

转载于:https://www.cnblogs.com/yuanxinru321/p/7543086.html