1.文字超出显示省略号
// 单行文字省略
.text-ellipsis-one{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
// 多行文字省略
.text-ellipsis-more{
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; // 指定换行行数
-webkit-box-orient: vertical;
}
2.img图片如何显示为圆形
// 设定图片格式为圆形
img{
border-radius: 50%;
overflow: hidden;
width: 100px;
}
3.居中
.center{
text-align: center;
}
