码迷,mamicode.com
首页 > 其他好文 > 详细

ie浏览器不支持多行隐藏显示省略号

时间:2017-06-26 20:08:04      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:web   lam   ack   判断   type   过程   tle   span   func   

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

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下的问题了,拿走不谢!






ie浏览器不支持多行隐藏显示省略号

标签:web   lam   ack   判断   type   过程   tle   span   func   

原文地址:http://www.cnblogs.com/wj19940520/p/7081907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!