文字超长显示省略号...坑(如果盒子本身是弹性盒子flex布局会不支持)

文字超长显示省略号...坑(如果盒子本身是弹性盒子flex布局会不支持)_第1张图片
如果盒子是弹性盒子 样式会失效

	#item-title{
					font-size: 28rpx;
					font-weight: 800;
					color: #2D3748;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

		&:nth-child(2){
								width: calc(100% - 172rpx);
								margin-left: 40rpx;
								>view{
									&:not(:first-child){//修复flex情况下text-overflow:ellipsis;失效问题
										display: flex;
										justify-content: space-between;
										align-items: center;
										font-size: 24rpx;
										font-family: PingFangSC, PingFang SC;
										font-weight: 400;
										color: #2D3748;
										margin-top: 20rpx;
									}
								}
								.price{
									font-size: 32rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 800;
									color: #FF5454;
								}
							}

你可能感兴趣的:(前端,javascript,css)