首页 > 代码库 > ie浏览器不支持多行隐藏显示省略号
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下的问题了,拿走不谢!
ie浏览器不支持多行隐藏显示省略号
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。