话不多说,直接上代码
.overstep {
/* 单行文本*/
/*超出部分不可见外能不能添加...,固定三项*/
overflow: hidden;
/*超出部分不可见*/
text-overflow: ellipsis;
/*隐藏部分的文字用...,但是这个想要实现,还*/
white-space: nowrap;
/*还 设置宽度为非自动,即设置空格不换行*/
/* 多行文本 */
/* 溢出隐藏 */
overflow : hidden;
/* 多出的文本用 ... 显示 */
text-overflow: ellipsis;
/* 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 需要显示的行数 */
-webkit-line-clamp: 2;
/* 设置伸缩盒对象的子元素从上到下纵向排列 */
-webkit-box-orient: vertical;
}
sass用法
// 单行溢出省略号
@mixin row-one {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 多行溢出省略号
@mixin multi-row($line) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
.overstep1 {
width: 100px;
@include row-one;
}
.overstep2 {
width: 100px;
@include multi-row(2);
}