平时在写页面过程中，相信大家都遇到过文本显示多行后用省略号代替的问题，来看看代码：
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下的问题了，拿走不谢！
时间： 2024-12-20 15:20:39