记录下项目中使用的文本溢出效果,方便日后复用。
单行文本溢出省略
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis; //溢出省略号效果
white-space: nowrap; //设置单行显示
多行文本溢出省略
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //设置超过多少行省略
-webkit-box-orient: vertical;
要组合使用这两个属性
- display: -webkit-box 将对象作为弹性伸缩盒子模型显示;
- -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;
该方法适合WebKit内核浏览器,更多内容参考: CSS多行文本溢出省略显示