css中flex后文本溢出的问题

原因:
为了给flex item提供一个合理的默认最小尺寸,flex将flex item的min-width 和 min-height属性设置为了auto

flex item的默认设置为:
min-width: auto 水平flex布局
min-height:auto 垂直flex布局

解决办法:

都是占50%,都完全ok

在这里插入图片描述

// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:okwidth: 0;flex:1;
// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:ok
flex:1;
min-width: 0;
// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:ok-多margin
width: 50%;

最大50%,默认左对齐,ok

在这里插入图片描述
在这里插入图片描述

// 1.都不超长:ok-左对齐的;2.前超,后不超:ok-左对齐的;3.前不超后超:ok-左对齐的;4.都超:ok-多margin
max-width: 50%;

同步溢出或者不溢出

在这里插入图片描述

// 1.都不超长:ok-同步-左对齐;2.前超,后不超:ok-要溢出都溢出,要不溢出都不溢出,同步的;3.前不超后超:ok-要溢出都溢出,要不溢出都不溢出,同步的;4.都超:ok
overflow: hidden;

参考:https://blog.csdn.net/weixin_45753473/article/details/127620010

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

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

相关文章

【ICCV2023】Scale-Aware Modulation Meet Transformer

Scale-Aware Modulation Meet Transformer, ICCV2023 论文:https://arxiv.org/abs/2307.08579 代码:https://github.com/AFeng-x/SMT 解读:ICCV2023 | 当尺度感知调制遇上Transformer,会碰撞出怎样的火花&#xff1…

【Nodejs】Node.js简介

1.前言 Node 的重要性已经不言而喻,很多互联网公司都已经有大量的高性能系统运行在 Node 之上。Node 凭借其单线程、异步等举措实现了极高的性能基准。此外,目前最为流行的 Web 开发模式是前后端分离的形式,即前端开发者与后端开发者在自己喜…

关于若依导出表格隐藏功能延伸--适用于表格导入更新

关于若依导出表格隐藏功能延伸--适用于表格导入更新 编写目的若依现有隐藏策略根据业务需要进行修正编写原理 优化 编写目的 若依框架中,已经自带了表格导出功能,但是有时根据业务要求需要导出后进行修改后更新的操作,如果数据量大且数据库设…

docker清缓存、日志、无用镜像

docker清缓存、日志、无用镜像 docker system df查看docker各类型文件占用情况 docker system df该命令列出了 docker 使用磁盘的 4 种类型: Images: 所有镜像占用的空间,包括拉取的镜像、本地构建的镜像 Containers: 运行中的容器所占用的空间&#x…

Gitlab 合并分支与请求合并

合并分支 方式一:图形界面 使用 GitGUI,右键菜单“GitExt Browse” - 菜单“命令” - 合并分支 方式二:命令行 在项目根目录下打开控制台,注意是本地 dev 与远程 master 的合并 // 1.查看本地分支,确认当前分支是否…

2、HAproxy调度算法

HAProxy的调度算法可以大致分为以下几大类: 静态算法:这类算法的调度策略在配置时就已经确定,并且不会随着负载的变化而改变。常见的静态算法有: Round Robin(轮询) Least Connections(最少连接数) Static-Weight(静态权重) Sourc…

day4 驱动开发 c语言学习

不利用系统提供的register_chrdev&#xff0c;自己实现字符设备的注册 底层代码 led.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include "head.h…

QSlider 样式 Qt15.15.2 圆形滑块

在看文档的时候测试了一下demo&#xff0c;然后发现了一个有意思的东西&#xff0c;自定义滑块为带边框的圆形。 在设置的时候边框总是和预期的有点误差&#xff0c;后来发现了这样一个计算方式可以画一个比较标准的圆。&#xff08;ABCDEF在下方代码块内&#xff09; 滑块的…

Kubernetes 之CNI 网络插件大对比

介绍 网络架构是Kubernetes中较为复杂、让很多用户头疼的方面之一。Kubernetes网络模型本身对某些特定的网络功能有一定要求&#xff0c;但在实现方面也具有一定的灵活性。因此&#xff0c;业界已有不少不同的网络方案&#xff0c;来满足特定的环境和要求。 CNI意为容器网络接…

MultipartFile重命文件名(中文文件名修改成英文)

思路&#xff1a;把MultipartFile先存到项目目录下&#xff08;或者磁盘&#xff09;&#xff0c;存的时候修改文件名&#xff0c;再读取出来转成MultipartFile 1.实现代码&#xff1a;MultipartFile先存到项目目录&#xff0c;再读取出来File public static MultipartFile n…

K8S集群管理:用名字空间分隔系统资源

Kubernetes 的名字空间并不是一个实体对象&#xff0c;只是一个逻辑上的概念。它可以把集群切分成一个个彼此独立的区域&#xff0c;然后我们把对象放到这些区域里&#xff0c;就实现了类似容器技术里 namespace 的隔离效果&#xff0c;应用只能在自己的名字空间里分配资源和运…

【iOS】—— 持久化

文章目录 数据持久化的目的iOS中数据持久化方案数据持久化方式分类内存缓存磁盘缓存 沙盒机制获取应用程序的沙盒路径沙盒目录的获取方式 持久化数据存储方式XML属性列表Preferences偏好设置&#xff08;UserDefaults&#xff09;数据库存储什么是序列化和反序列化&#xff0c;…

Hadoop概念学习(无spring集成)

Hadoop 分布式的文件存储系统 三个核心组件 但是现在已经发展到很多组件的s 或者这个图 官网地址: https://hadoop.apache.org 历史 hadoop历史可以看这个: https://zhuanlan.zhihu.com/p/54994736 优点 高可靠性&#xff1a; Hadoop 底层维护多个数据副本&#xff0c;所…

工程师分享:如何解决传导干扰?

电磁干扰 EMI 中电子设备产生的干扰信号是通过导线或公共电源线进行传输&#xff0c;互相产生干扰称为传导干扰。传导干扰给不少电子工程师带来困惑&#xff0c;如何解决传导干扰&#xff1f; 找对方法&#xff0c;你会发现&#xff0c;传导干扰其实很容易解决&#xff0c;只要…

Rust中的iter(), into_iter(), iter_mut()

在Rust中&#xff0c;iter(), into_iter(), iter_mut()都是用于在集合类型上创建迭代器的方法。这三个方法各有不同&#xff0c;下面一一进行介绍。 iter(): iter() 方法创建一个不可变的引用迭代器。当你只想读取集合中的元素&#xff0c;而不想改变它们或消耗集合时&#xff…

网页配色之黄金分割法 优漫动游

妇孺皆知&#xff0c;数学上有一个黄金分隔点--0.618。传闻用次比率数分隔是最具美感的&#xff0c;从美眉身体到高楼兴办&#xff0c;从事艺术工作术到美术无不出其之左&#xff0c;所以被称为"神秘的"黄金分隔点。与此同声&#xff0c;人们也对其举行了洪量的接洽&…

Jmeter基础篇(17)Jmeter中Stop和X的区别

一、前言 在Apache JMeter中&#xff0c;Stop和X之间存在一些区别。虽然它们都是用于结束测试的不同方法&#xff0c;但它们在实施方式和效果上存在一些差异。 二、Jmeter中的Stop 首先&#xff0c;让我们了解一下Stop。 在JMeter中&#xff0c;Stop是指在测试结束时关闭线…

redis单线程速度又快

Redis之所以在单进程单线程的情况下能够如此快速&#xff0c;主要有以下几个方面的原因&#xff1a; 纯内存操作&#xff1a;Redis将数据存储在内存中&#xff0c;而不是磁盘上。内存的读写速度远高于磁盘&#xff0c;因此Redis能够以极快的速度进行数据的读写操作。 非阻塞I…

css实现步骤条中的横线

实现步骤中的横线&#xff0c;我们使用css中的after选择器&#xff0c;content写空&#xff0c;然后给这个范围设定一个绝对定位&#xff0c;相当于和它设置伪类选择的元素的位置&#xff0c;直接看代码&#xff1a; const commonStyle useMemo(() > ({fontSize: 30px}),[]…

前端开发中的微服务架构设计

前端服务化和小程序容器技术为前端应用带来了更好的组织结构、可维护性和可扩展性。这些技术的应用将促进前端开发的创新和发展&#xff0c;使团队能够更好地应对复杂的前端需求和业务挑战。通过将前端视为一个服务化的架构&#xff0c;我们能够构建出更强大、可靠且可持续的前…