css之flex布局文本不换行不显示省略号的解决方法

文章目录

  • 一、单行长文本显示省略号
  • 二、flex布局下的处理技巧


一、单行长文本显示省略号

先讲讲常规情况下长文本不跨行显示省略号的代码:

overflow: hidden;  //不允许内容超出盒子
white-space: nowrap;   //不允许文本跨行
text-overflow: ellipsis;   //文本超出部分以“...”省略号表示

overflow:对超出的内容进行处理
white-space :对文本格式进行规定
text-overflow :对超出的文本进行处理
属性值等详细内容可以自行百度作补充学习

二、flex布局下的处理技巧

前面讲到的是常规情况,而在实战flex复杂布局下则会出现单行长文本显示省略号操作失败的问题

两种解决方式:

1.在flex项目盒子上设置 overflow:hidden
2.在flex项目盒子上设置 min-width:0

经过大量测试,有些手机机型适配 min-width 有问题,建议设置成 width: 0; 更好一点

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

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

相关文章

SpringMVC注解及使用规则

文章目录 前言一、SpringMVC注解是什么?二、使用步骤1.注解使用2创建JSP3 SpringMVC视图1. 逻辑视图(Logical View)2. 物理视图(Physical View)区别和关系 4 SpringMVC注解总结 总结 前言 提示:这里可以添…

建立一个简单的网页音乐盒模型效果#css#h5

“音乐盒”可以看做一个大盒子&#xff0c;用<div>标签进行定义。大盒子的上面为文本内容&#xff0c;可以在<div>标签中嵌套<h2>和<p>标签来实现&#xff1b;大盒子下面为图像&#xff0c;通过在<div>标签中嵌套<img/>标签来实现。 样式…

c语言bit位定义--位域的分配是怎样的? 最先定义的在最低位

//author: hjjdebug //date: 2024年 03月 29日 星期五 14:37:38 CST //c语言bit位定义--位域的分配是怎样的? 最先定义的在最低位 #include <stdio.h> typedef struct { unsigned int is_error : 1; // unsigned int : 29; // 29位不用 unsigned int is_…

RK3588平台开发系列讲解(开发环境搭建)

目录 准备开发环境 安装库和工具集 检查和升级主机的 python 版本 检查和升级主机的 make 版本 检查和升级主机的 lz4 版本 检查和升级主机的 git 版本 准备开发环境 推荐使⽤ Ubuntu 22.04 或更⾼版本的系统进⾏编译。其他的 Linux 版本可能需要对软件包做相应调 整。除…

[Python人工智能] 四十五.命名实体识别 (6)利用keras构建CNN-BiLSTM-ATT-CRF实体识别模型(注意力问题探讨)

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解融合Bert的实体识别研究,使用bert4keras和kears包来构建Bert+BiLSTM-CRF模型。这篇文章将详细结合如何利用keras和tensorflow构建基于注意力机制的CNN-BiLSTM-ATT-CRF模型,并实现中文实体识别…

notepad++里安装32位和64位的16进制编辑器Hex-Editor

这个16进制编辑器确实是个好东西&#xff0c;平时工作种会经常用到&#xff0c; 这是hex-editor的官网。这个里边只能下载32位的(64位的看最下边)&#xff0c;选一个合适的版本&#xff0c;我当时选的是最新的版本 https://sourceforge.net/projects/npp-plugins/files/Hex%20E…

android 屏蔽系统通知

1.源码路径: frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/NotificationListener.java​ 2.NotificationListener类是负责处理监听通知更新并将其传递给向用户显示的NotificationPresenter,也就是SystemUI中监听到系统通知的起点. public class No…

奇偶生成器选型参数,结构原理,工艺与注意问题总结

🏡《总目录》 目录 1,概述2,工作原理2.1,输入数据2.2,奇偶校验位选择2.3,数据处理2.4,输出校验位2.5,错误检测2.6,控制逻辑3,结构特点3.1,输入接口3.2,处理核心3.3,输出接口4,

ARP协议定义及工作原理

ARP的定义 地址解析协议(Address Resolution Protocol&#xff0c;ARP)&#xff1a;ARP协议可以将IPv4地址(一种逻辑地址)转换为各种网络所需的硬件地址(一种物理地址)。换句话说&#xff0c;所谓的地址解析的目标就是发现逻辑地址与物理地址的映射关系。 ARP仅用于IPv4协议&a…

Centos服务器Open Gauss 部署

近期很多的项目由于信创要求使用一些国产的数据库&#xff0c;比如OpenGauss。OpenGuass是华为高斯DB的开源版&#xff0c;内核还是PostgreSQL&#xff0c;商业版是收费的。这里记录一下是如何安装部署 的。 官方中文文档 官方下载地址 部署要求 操作系统要求 ARM&#xff…

拆分巨石:将MVPS和MVAS应用于遗留应用程序——可持续架构(六)

前言 MVP 和 MVA 的概念不仅适用于新应用程序&#xff1b;它们提供了一种新颖的方式来审视对遗留系统的范围变更&#xff0c;以防止过快地承担过多的变化 - 参见图1。MVA 可以帮助组织评估和更新其技术标准&#xff0c;通过展示新技术如何真正对支持 MVP 至关重要。创建 MVA 可…

绿联 安装PDF工具

这是一个强大的本地托管的基于 Web 的 PDF 操作工具&#xff0c;使用 docker&#xff0c;允许您对 PDF 文件执行各种操作&#xff0c;例如拆分、合并、转换、重组、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序最初是 100% ChatGPT 制作的应用程序&#xff0c;现已发展…

BaseDao封装增删改查

文章目录 什么是BaseDao操作代码增删改查询单个数据查询多个数据 总结 什么是BaseDao BaseDao是&#xff1a; 数据库里负责增加&#xff0c;删除&#xff0c;修改&#xff0c;查询 具体来说是一种接口代码,公共方法的接口类。 在dao层新建basedao,其他dao层接口继承basedao 相…

近红外染料CY5.5-COOH的合成和表征

近红外染料CY5.5-COOH是一种重要的荧光染料&#xff0c;应用于生物成像、药物传递和光动力治疗等领域。为了深入了解其性质和应用&#xff0c;我们进行了CY5.5-COOH的合成和表征。 一、合成方法 CY5.5-COOH的合成采用多步反应的方法。首先&#xff0c;以CY5.5为原料&#xff…

代码随想录算法训练营第二十三天(二叉树9)|669. 修剪二叉搜索树、108. 将有序数组转换为二叉搜索树、538. 把二叉搜索树转换为累加树(JAVA)

文章目录 669. 修剪二叉搜索树解题思路源码 108. 将有序数组转换为二叉搜索树解题思路源码 538. 把二叉搜索树转换为累加树解题思路源码 669. 修剪二叉搜索树 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使…

电子开关选型参数,结构原理,工艺与注意问题总结

🏡《总目录》 目录 1,概述2,工作原理3,结构特点3.1,多模式控制3.2,内置高压晶体管3.3,保护功能3.4,集成补偿技术4,工艺流程4.1,晶圆处理工序4.2,晶圆针测工序5,选型参数5.1,功率需求5

【医学嵌入模型】中文医疗文本处理大模型 PCL-MedBERT

中文医疗文本处理大模型 PCL-MedBERT 提出背景对ELECTRA限制的深入分析eHealth的创新方法实体识别关系抽取 总结 最近再做医学项目&#xff0c;需要从文本中抽取医学概念和关系&#xff0c;通用模型的抽取效果还可以。 但还想找医学嵌入模型&#xff0c;能够更准确地从文本中识…

常见的Nginx+Redis+MQ+DB架构设计

三高&#xff0c;复杂的架构 SQRS CAP 缓存&#xff0c;限流 【Redis&#xff0c;缓存】 cache-aside 缓存cache&#xff1a;数据源的副本 store 1. Read/Write Through Pattern 读写穿透模式 redis&#xff1a;放当前在线用户&#xff0c;热点数据

第十四届蓝桥杯第十题:蜗牛分享

问题描述 输入格式 输出格式 输出共一行&#xff0c;一个浮点数表示答案&#xff08;四舍五入保留两位小数&#xff09;。 样例输入 3 1 10 11 1 1 2 1样例输出 4.20样例说明 蜗牛路线&#xff1a;(0,0)→(1,0)→(1,1)→(10,1)→(10,0)→(11,0)(0,0)→(1,0)→(1,1)→(10,1…

【C语言】结构体详解 (二) 内存函数、结构体传参

目录 1、 结构体的内存对齐 1.1、对齐规则 1.2、练习1、练习2&#xff08;演示对齐规则1、2、3、4&#xff09; 2、为什么存在内存对齐 2.1、平台原因&#xff08;移植原因&#xff09; 2.2、性能原因 2.3、那么如何即满足对齐&#xff0c;又要节省空间呢&#xff1f; …