首页 > 建站教程 > Div+Css >  js控制多行文字超出显示点点点“...”正文

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;
}