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

news2024/9/24 7:23:25

要做一个如下的弹窗,很简单。但是当要切换成多语言或者数据是动态的话(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;
		}
	}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/748900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日一练 | 华为认证真题练习Day77

1、如下图所示&#xff0c;主机A和主机B使用哪种网络设备可以实现通信&#xff1f; A. 路由器 B. 集线器 C. HUB D. 二层交换机 2、路由器输出信息如下&#xff0c;下列说法错误的是&#xff1f; A. Ethernet0/0/0接口的MTU值为1480 B. Ethernet0/0/0接口物理链路正常 C.…

5分钟体验墨迹天气API设计与调试,来看看你关心的城市天气吧~

1 准备工作 请务必完成华为云账号注册和实名认证&#xff0c;否则无法进行实操实验。 Step 1 >>>点我立即注册华为云账号<<< Step 2 >>>点我完成实名认证<<< 1.1 登录访问API Arts主页 1、点击访问API Arts主页&#xff0c;点击“申请…

项目管理工具大比拼:全方位评估各家优势

在现代企业中&#xff0c;项目管理已经成为了一个不可或缺的部分。而具有高效、易用、多样化功能的项目管理软件能够帮助企业更好地管理项目和任务&#xff0c;并提高团队生产力和效率。因此&#xff0c;在选择适合的项目管理软件时&#xff0c;需要对不同软件进行全方位比较和…

〖码银送书第三期〗《Python机器学习:基于PyTorch和Scikit-Learn》

前言 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来&#xff0c;机器学习和深度学习迅猛发展&#xf…

1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足, 增了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是IE9以上版本的浏览器才支持, 如果不考虑兼容性问题,可以大量使用这些新特性。 1.1 HTML5 新增的语义化标签 ●<header> : 头部标签 ●<nav&…

优思学院|工厂如何从零开始开展TPM管理?

TPM管理的实施步骤&#xff0c;因应各企业的情况和特性&#xff0c;实施的方法会有点差异&#xff0c;但一般的基本步骤是以下表所表示。 这16个TPM管理的基本步骤&#xff0c;是将各企业之长处更加的发挥&#xff0c;且为了达成重点目标&#xff0c;组织全体的实施方法。 大…

【Spring | 资源处理】

Resource Resource 接口介绍核心方法常见接口优缺点 内置Resource实现UrlResourceClassPathResourceFileSystemResourcePathResourceServletContextResourceInputStreamResourceByteArrayResource Resource 接口 不幸的是&#xff0c;Java的标准Java.net.URL类和各种URL前缀的标…

Buck电路的原理及器件选型指南

Buck电路工作原理 电源闭合时电压会快速增加&#xff0c;当断开时电压会快速减小&#xff0c;如果开关速度足够快的话&#xff0c;是不是就能把负载&#xff0c;控制在想要的电压值以内呢? 假设12V降压到5V&#xff0c;也就意味着&#xff0c;MOS管开关需要42%时间导通&#…

java每日一题:手动触发垃圾回收(GC)

面试官: 首先&#xff0c;我想问一下&#xff0c;你能向我解释一下"手动触发Java垃圾回收"的过程吗&#xff1f;&#x1f914; 面试者: 在Java中&#xff0c;垃圾回收是自动进行的&#xff0c;由Java虚拟机&#xff08;JVM&#xff09;负责管理。但是&#xff0c;有…

Linux进程(一)---深入了解进程的概念及状态

目录 什么是进程 如何管理进程 描述进程 PCB到底是什么&#xff1f; PCB的内容分类 组织进程 查看进程 ps命令 通过系统调用获取进程标示符 getpid() getppid() 通过系统调用创建进程-fork初识 进程状态 运行态(R) 阻塞态(S) 阻塞态 挂起态 和就绪态的区别 …

【UE4 C++】07-角色运动设置

效果 可以看到我们可以通过WASD控制角色前后左右移动&#xff0c;通过鼠标控制摄像机旋转朝向。 步骤 1.在虚幻商城中搜索“Gideon”&#xff0c;将该免费资源添加到工程中&#xff08;大概2.6G&#xff09; 2. 打开之前创建的“PlayerCharacter” 选中网格体组件&#xff0…

华为OD机试真题 Java 实现【不开心的小朋友】【2023 B卷 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 大家好&#xff0c;我是哪吒。 做技术&#xff0c;我是认真的&#xff0c;立志于打造最权威的华为OD机试真题专栏&#xff0c;帮助那些与我有同样需求的人&#xff…

C# 参数传递(引用类型参数)

目录 一&#xff0c;引言 二&#xff0c;引用类型参数作为值参数传递 三&#xff0c;引用类型参数作为引用参数传递 一&#xff0c;引言 方法中参数的传递方式主要有值参数传递和引用参数传递&#xff08;ref&#xff0c;out&#xff09;&#xff0c;而参数有可以分为值类型…

巩固一下NodeJs

1、初始化(确保当前电脑有node环境) npm init 2、安装express npm i expressnpm i ws文件结构 3、编写相关代码启动node服务(server.js) //导入下列模块&#xff0c;express搭建服务器&#xff0c;fs用来操作文件、ws用来实现webscoket const express require("expr…

使用halcon深度学习实现缺陷检测

使用halcon深度学习实现缺陷检测 前言 Halcon是一种功能强大的机器视觉库&#xff0c;提供了许多用于图像处理和分析的工具和算法。它也集成了深度学习算法&#xff0c;可以用于缺陷检测和其他视觉任务。下面是一些使用Halcon深度学习算法实现缺陷检测的步骤&#xff1a; 1.…

写好“提示”改变“智造未来”-GPT4提示词驶入代码优化驾驶座心得

开篇 在前端科技的新浪潮中,Artificial Intelligence (AI)的逐渐成熟与发展引领着我们向前。其中OpenAI的GPT4提供了我们一种新的可能,帮助我们优化代码,使编程变得更加轻松。在这篇文章中,我们将一同探究如何在1-2分钟内,依靠GPT的提示词优化我们的代码,并展现出我们在…

F - Weight of the System of Nested Segments - 思维+排序

分析&#xff1a; 将每个点的权重以及坐标存下来&#xff0c;按权重排序&#xff0c;找出前n个点然后按坐标排序&#xff0c;再按要求输出最大区间到最小区间。 代码&#xff1a; #include <bits/stdc.h>using namespace std;typedef long long ll; typedef pair<in…

Python高频面试题——如何实现列表去重

在招聘Python自动化测试岗位面试时&#xff0c;最常问的一个编码实战问题就是&#xff1a; 一个包含多个值的列表&#xff0c;但存在重复值&#xff0c;如何实现去重&#xff1f;当然大家也可以结合实际业务情况进行提问&#xff0c;例如&#xff1a;统计今天有多少个不同的用…

Day51|309.最佳买卖股票时机含冷冻期 、714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 1.题目&#xff1a; 给定一个整数数组prices&#xff0c;其中第 prices[i] 表示第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff0…

电脑如何提高图片dpi分辨率?在线修改图片dpi的操作方法

想要给微信换个背景图片&#xff0c;但是又发现像素尺寸不合适&#xff0c;需要调整图片大小&#xff08; https://www.yasuotu.com/size&#xff09;&#xff0c;那么怎么可以修改图片大小呢&#xff1f;今天分享的这款图片处理工具可以快速将图片大小修改&#xff0c;一起来看…