实现溢出文本省略号显示

1、css实现

li { 
    width : 30%;
    text-overflow: ellipsis;
    white-space: nowrap;    /* 限制不换行 */
    overflow: hidden;     /* 隐藏溢出 */
}

2、css限制显示行数(html5)

p{
    display: -webkit-box;
    -webkit-line-clamp: 3; /*行数*/
    -webkit-box-orient: vertical;
    overflow: hidden;
}

3、js限制字数,超出省略号(...)显示

html代码:<p id="con-num"></p>

js代码:截取元素p中字符串的固定长度(比如说64),再赋值给元素p

function broadcast(){
    var conTxt = $("#con-num").html();
    LimitNumber(conTxt,"con-num");
}
/*用js限制字数,超出部分以省略号...显示*/
function LimitNumber(txt,idName) {
    var str = txt;
    str = str.substr(0,64) + '...' ;
    var id=document.getElementById(idName);
    id.innerText=str;
}

 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

function broadcast(){
    showHiddenText(t.context);
}
/*用js限制字数,超出部分以省略号...显示*/
function showHiddenText(content){
    var newstr = content;
    if(content!=null &&content!=""){
        if(content.length>64){
            newstr = content.substring(0,64)+"...";
        }
    }
    return newstr;
}

 

posted @ 2018-04-25 11:29  miny_simp  阅读(150)  评论(0编辑  收藏  举报