【css】常用的css样式

68 阅读1分钟

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;
}

/* 文本2行溢出隐藏 */
.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;
}