- overflow:hidden; // 超出的文本隐藏
- text-overflow:ellipsis; // 溢出用省略号显示
- white-space:nowrap; // 溢出不换行
CSS3 提供了解决了这个问题方法:
- display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示.
- -webkit-box-orient:vertical; // 从上到下垂直排列子元素 (设置伸缩盒子的子元素排列方式)
- -webkit-line-clamp:2; // 这个属性不是 css 的规范属性, 需要组合上面两个属性, 表示显示 2 行.
3 行溢出隐藏 css 的样式如下:
- display: -webkit-box;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
来源: http://www.qdfuns.com/article/50449/15cbc9487eee9d121764c41302e3cfca.html