CSS设置一行文字,超出部分自动隐藏
2015-09-26 16:33
691 查看
.textone { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 25px; max-height: 25px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了,设置超过两行自动隐藏是效果,如下代码:
line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下:
.textTow {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 23px;
max-height: 46px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
相关文章推荐
- CSS设置一行文字,超出部分自动隐藏
- css总结
- CSS3中的动画基础
- 移动端网页解决CSS的active伪类无效的方法
- 简析CSS表达式attr()的运用
- CSS计数器counter()的用法简介
- 进一步理解CSS编程中的块级元素和行内元素
- 获取元素的style样式(内联,内部)
- 2015-09-22 css2
- html与css笔记
- 2015-09-21 css学习1
- 模块化的CSS
- 初步学习css3之3D动画
- css学习笔记(四)-文本属性
- HTML与CSS
- CSS小知识
- 960CSS框架,之前有用过 了解下框架基本原理
- CSS框架960Grid从入门到精通一步登天
- web网页的表单排版利器--960css
- 4、第4次课 CSS代码第三节课20150923