css 常见问题记录

盒子不限宽高，总是居中显示

.box{
	position: fixed;  // fixed 或 absolute
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

css引入阿里矢量图标，图标高度偏大问题：

.iconfont{
	display: flex;
	align-items: center;
	width: 30rpx;
}
icon::after{
	content: '';
	height: 0;
}

文字溢出添加省略号：

/* 不用设置宽度，当文字满一行或二行时自动出现省略号 */
.one_text_over{
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.two_text_over{
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
/* 需要设置宽度，可自定义文字出现省略号的位置 */
.one_text_width_over{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

两个文字与三个文字等宽：

.text_2em {
  width: 3em;
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}