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

最新推荐文章于 2024-07-12 16:27:40 发布

大力水手~

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量487

点赞数 8

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_44705979/article/details/135992459

版权

在这里插入图片描述
如果盒子是弹性盒子样式会失效

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