logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

原生JS_文本溢出显示省略号

项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了)实现的方式有很多种,具体使用哪种视情况而定。

先来讲一下CSS实现的办法。


CSS:单行

p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap      
}

这种方式文本不会换行,适用于裁剪标题。但在需要显示两行或以上时,就下需要其他办法。


CSS伪类 :after

p{position:relative;}
p:after{
    display: inline;
    content: "...";
    position:absolute;
    right:0;
    bottom:0;
}

使用伪类来显示“...”省略符号,用position定位到右下角。

但这种方式,你会发现一个问题,如果p标签设置了宽高,文字数量无法充满容器,文字与“...”之间有空白。


JavaScript字符截取

//限制文章摘要字数
function limitExcerpt(num){
    var posts = document.getElementById("post_box");    //获取容器id
    var postsText = posts.getElementsByClassName("post-text");    //获取文章摘要
    for (var i = 0; i < postsText.length; i++) {
        //获取列表每篇文章字数
        var txt = postsText[i].innerHTML;
        //判断文章摘要字数
        if (txt.length>num) {
            txt = txt.substring(0,num-1)+"..."
        }else{
            txt = txt + "..."
        }
        postsText[i].innerHTML = txt;
    }
};
// 调用函数_截取120字数
limitExcerpt(120);



Comments 0