zoukankan      html  css  js  c++  java
  • ie浏览器不支持多行隐藏显示省略号

    平时在写页面过程中,相信大家都遇到过文本显示多行后用省略号代替的问题,来看看代码:

    p{
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp:12;//表示显示12行之后用省略号代替
        -webkit-box-orient:vertical;
    }    

    可以看到,上面的属性是带了-webkit-前缀的,那如果要适应ie的话,能不能在前面加-ms-的前缀呢?

    答案是不能,本人亲自测了一下,表示根本没有任何效果;所以找别的办法吧,就是判断当前p标签里面的文字个数,截取到想显示的到的文字,之后的用“...”表示,来看看代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .r-advInfo-itemText{
                padding: 25px 20px;
                background: pink;
                color: #000;
                border-radius: 40px;
                width: 200px;
            }
            .r-advInfo-item p {
                margin-top: 10px;
                font-size: 14px;
                color: #000;
                line-height: 24px;
                margin-top:20px;
            }
     
     
        </style>
    </head>
    <body>
    <div class="r-advInfo-itemText">
        <p id="qfr"></p>
    </div>
    <script>
     
        LimitNumber('只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字','qfr',20);
        /*用js限制字数,超出部分以省略号...显示*/
        function LimitNumber(txt,idName,num) {
            var str = txt;
            str = str.substr(0,num) + '...' ;
            var id=document.getElementById(idName);
            id.innerText=str;
        }
     
    </script>
    </body>
    <html>
    以上就可以解决ie下的问题了,拿走不谢!






  • 相关阅读:
    c++引用(reference)
    c++ 三目运算符功能增强
    C++ “新增”bool类型关键字
    C++ struct
    C++命名空间(namespace)
    基于python 实现KNN 算法
    Chrome 快捷键使用
    WOE(weight of evidence, 证据权重)
    python 命令运行环境下 ModuleNotFoundError: No module named 'Test'
    基于python 信用卡评分系统 的数据分析
  • 原文地址:https://www.cnblogs.com/wj19940520/p/7081907.html
Copyright © 2011-2022 走看看