zoukankan      html  css  js  c++  java
  • 实现溢出文本省略号显示

    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;
    }
  • 相关阅读:
    CentOS中rpm和yum到底有什么区别?
    Anaconda是个什么东东?
    Hadoop入门学习整理(三)
    Hadoop入门学习整理(二)
    CentOS6.10下安装MongoDB和Redis
    Linux 系统中环境变量/etc/profile、/etc/bashrc、~/.bashrc的区别
    一些想法
    时间
    周末
    条件
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8941729.html
Copyright © 2011-2022 走看看