关于单行文字,多行文字溢出隐藏时 css jq处理方法 兼容各个浏览器
2016-10-14 15:18
316 查看
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>
.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>
相关文章推荐
- html,css jq,js关于多行,单行文字内容溢出用点点点(...)省略号表示
- 关于客户端浏览器界面文字内容溢出用省略号表示方法
- 好东西,收藏留着以后用:单行/多行文本溢出显示省略号,多浏览器兼容
- 关于单行和多行文字溢出用省略号表示
- 关于client浏览器界面文字内容溢出用省略号表示方法
- 浏览器兼容处理方法汇总
- 关于文字溢出DIV容器的解决方法
- css处理过长文字自动隐藏(兼容IE和firefox)
- 关于浏览器不兼容,又不好调试时的方法
- 关于背景透明,文字不透明的最佳方法,兼容IE
- CSS实现背景透明文字不透明的可行方法(兼容各浏览器)
- css overflow溢出隐藏(文字溢出时的自动隐藏处理)
- CSS 单行溢出显示省略号...方法(兼容IE FF)
- 重构技巧三:移动端文字截取后添加三个点的方法,多行处理方式
- -webkit-line-clamp实现多行文字溢出隐藏显示省略号
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
- 单行溢出文本显示省略号的方法(兼容IE FF)
- 文字溢出时的自动隐藏处理