js控制多行文字超出显示点点点“...”_div+css教程,div教程,css兼容性教程,css特效教程_我爱模板网 - 提供下载各种免费建站资源,免费网站模板,免费网页特效,让你爱上建站!
  • 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  js控制多行文字超出显正文

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

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-07-26 10:11
分享到:
    不知道大家在做网站,尤其是文章列表的时候,有没有遇到一个问题,为了限制文章的标题不要太长,尤其是标题后面有时间等等的时候,往往需要对标题进行截断,后面加上“...”。通常写法是,给标题的容器加上固定宽度,或者相对宽度,然后,加上“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;
}

(责任编辑:网页模板)
  • 本文标签:
  • 多行,文字,超出,显示,点,点点,“,...,”,
手机输入法占用window窗口的高度
BFC原理,BFC详解,什么是前端BFC