js控制多行文字超出显示点点点“...”

    不知道大家在做网站，尤其是文章列表的时候，有没有遇到一个问题，为了限制文章的标题不要太长，尤其是标题后面有时间等等的时候，往往需要对标题进行截断，后面加上“...”。通常写法是，给标题的容器加上固定宽度，或者相对宽度，然后，加上“overflow:hidden; text-overflow:ellipsis; white-space:nowrap;”，第一个属性是，溢出隐藏，第二个是溢出部分变成“...”，第三个属性是强制文字不换行。的确很实用。但是，如果是多行文字，这个方法就不行了，因为这里有个“white-space:nowrap;”，强制文字不换行。
    今天，我爱模板网在这里分享下自己的方法，多行文字溢出也可以实现显示“...”，而且完美兼容IE6+，效果图如下：

    方法是：

    1、文字套两个容器，假设html代码如下：

<div class="box">
    <p>我爱模板网精选各种网页模板，css模板，网页特效，广告代码，开源网站源码，建站素材，精美网站欣赏，全部免费下载。并提供各种建站教程，力图帮助新手解决建站困难。找模板，找素材，找教程，就来我爱模板网。</p>
</div>

    2、css代码如下：

.box{
    height:50px;
    width:100px;
    border:1px solid red;
}
p{line-height:25px; padding:0; margin:0;}

    3、jQuery代码如下(注意要引入jQuery)：

$(".box").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)(\.\.\.)?$/, "..."));
    };
});

    用js判断里层容器和外层容器的高度，用正则表达式，将多于的文字，替换成“...”。

    还有一种纯css的方法，由于使用到了css3效果，兼容性非常不好，仅供参考：

.box{
    text-align: center;
    color:#C8CFD6;
    height:34px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！