相对绝对定位父元素不设置宽度,根据子元素撑开(white-space: nowrap;)

13 篇文章 0 订阅

要做一个如下的弹窗,很简单。但是当要切换成多语言或者数据是动态的话(title可能会很长),那么弹窗固定宽度就不适用了。
在这里插入图片描述
有可能会出现下图的情况
在这里插入图片描述
也有可能出现下面的情况,文字被换行了(有时候这种情况也是可以的,取决于项目要求)
这种情况是弹窗不设置width,设置最小宽度形成的
在这里插入图片描述
但是我想要的是下图的样式
在这里插入图片描述
1.弹窗不设置width,但是可以设置最小宽度(min-width)
2.整体布局正常(我这边用的是弹性布局),重点是内容的样式要加上white-space: nowrap;和设置最小宽度
ps:ml-18 f30 text-333 flex align-center 一些封装的样式

<view class="more bg-fff" v-if="moreShow">
	<view class="more-item flex align-center" v-for="(item,index) in moreList" :key="index" @click="moreUrl(item)">
		<u-image :src="item.icon" width="36rpx" height="36rpx"></u-image>
		<view class="ml-18 f30 text-333 more-item-name">
			{{item.name||''}}
		</view>
	</view>
</view>
export default{
	data(){
		return{
			moreShow:false,//控制弹窗显示隐藏
			moreList:[
				{icon:'',name:'',url:''}//icon图片地址 name内容 url跳转的地址
			],//弹窗数据列表
		}
	}
}
.more{
	min-width: 272rpx;
	padding: 12rpx 0;
	border-radius: 14rpx;
	box-shadow: 0px 4rpx 18rpx 0px rgba(0,0,0,0.2);
	position: absolute;
	top: 72rpx;
	right: 0rpx;
	z-index: 10090;
	&-item{
		padding-left: 36rpx;
		height: 84rpx;
		&-name{
			min-width: 160rpx;
			white-space:nowrap;
			padding-right: 36rpx;
		}
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值