css常用类名封装

此博客将持续更新 分享开发中常用css类名封装 便于快速开发！！！

一 文字溢出显示省略号

1 单行溢出

类名：.Text-overflow
代码：

        .Text-overflow {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
        }

2 多行溢出

类名：.Texts-overflow
代码：

  .Texts-overflow {
                display: -webkit-box; /* 将元素显示为弹性盒子 */
                -webkit-box-orient: vertical; /* 设置子元素在纵轴上堆叠 */
                overflow: hidden; /* 溢出部分隐藏 */
                -webkit-line-clamp: 2; /* 最多显示3行 */
                text-overflow: ellipsis; /* 溢出部分显示为省略号 */
        }

二 flex类名封装

	.flex {
		display: flex;
	}
	//侧轴方向居中
	.flexA {
		display: flex;
		align-items: center;
	}
   //主轴方向居中
	.flexB {
		display: flex;
		justify-content: center;
	}
	//主轴侧轴都居中
	.flexC {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//切换主轴
	.flexcol {
		display: flex;
	    flex-direction: column;		
	}
	//侧轴居中 主轴两端对齐
	.flexJ {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	//换行
	.warp {
		flex-wrap: wrap;
	}

	.flex1 {
		flex: 1;
	}

3 解决苹果底部安全距离

.ipone{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

}

更多还在持续更新中…