1.单行文字溢出隐藏css 处理方法
.user-list-info{
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
2. 2行或者多行文字溢出隐藏显示css处理方法(此方法不兼容IE浏览器,360兼容模式)
.user-list-info{
color:#666;
padding:0 26px;
height:40px;
line-height: 20px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
3. 2行文字多行文字溢出隐藏 jq处理方法(兼容到IE8)
1)首先引入jq包 jquery.ellipsis.js / jquery.min.js
2) html 处理
<div class="user-list-info font-12">
<p>汇聚强大的一站式视频服务及处理能力,为用户提供卓越的视频体验</p>
</div>
3)css 处理 :
.user-list-info{
width:170px;//给定宽
line-height:20px; //给个line-height
margin:0 auto;
}
. font-12{
font-size:12px;
}
4) js处理:
<script>
//此地要放在ajax 加载完数据后处理
$('.user-list-info').ellipsis({
english: false,
lineNum: 2 //2行溢出隐藏
});
</script>