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