1、字体段落
.word-break-all {
word-break: break-all;
}
.word-break-word {
word-wrap: break-word;
}
.text-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clamp-hidden {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
2、布局
.flex {
display: flex;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-between-x {
display: flex;
justify-content: space-between;
}
.flex-end{
display: flex;
align-items: center;
justify-content: end;
}
.flex-around {
display: flex;
align-items: center;
justify-content: space-around;
}
.flex-around-y {
display: flex;
justify-content: space-around;
}
.flex-center-y {
display: flex;
align-items: center;
}
.flex-center-x {
display: flex;
justify-content: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-r {
display: flex;
justify-content: flex-end;
}
.flex-center-r {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex-baseline-x {
display: flex;
align-items: baseline;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.flex-column-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-column-y {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-start-y {
display: flex;
justify-content: center;
align-items: flex-start;
}
.fl {
float: left;
}
.fr {
float: right;
}
.position-a {
position: absolute;
}
.position-r {
position: relative;
}
.over-hide {
overflow: hidden;
}
3、测试
.border-1{
border: 1rpx solid;
}