星之书笔记

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

先来讲一下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);