文字过长使用省略号展示，text-overflow 的使用和不生效场景的解决办法，flex 布局中文字省略展示的坑

在前端开发过程中【单行文本内容过长使用省略号展示】这是一个特别常见的功能，大家都知道要使用 text-overflow 这个 css 属性。

关于这个属性，我们可以先看一下官方文档怎么说。

text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。

但是实际应用的过程中，没有那么简单，尤其是在 flex 布局中，text-overflow 有的时候不生效。我总结了一些一些常用的场景，大家最好自己复制代码自己调试一下，看看区别，对我们提高开发效率有很大的作用。

不瞒你说，在整理这篇文章之前，在  flex 布局中超长文本省略号无效这个问题确实困扰了我一段时间。text-overflow 属性有的时候有效，有的时候无效，然后改 bug 的时候，给各种dom 乱增加一些属性就好使了，我也觉得莫名其妙的就好了，也不知道原理是什么，这篇文章可以从根本上理解一下，反正我是顿悟了，至少关于这个的 bug 可以分分钟改好了。

1. 文本省略号展示的三个必备属性

单行文本内容过长之用省略号展示需要用到的三个 CSS属性如下:

  1. white-space: nowrap;  设置不可折行
  2. overflow: hidden; 设置超出宽度隐藏
  3. text-overflow: ellipsis; 设置文本内容用省略号展示

注意，这三个属性是需要给文本内容的直接父元素设置的，如下：

<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">很长很长的文本，需要用省略号展示的文本</div>

2. 块元素/行内元素/行内块元素

块元素/行内元素/行内块元素【直接包含文本内容】的时候，直接给标签设置上面的三个属性就可以，不会有无效的情况；

2.1 代码

<div class="block-wrapper"><div class="label">类型一：块元素/行内元素/行内块元素【直接包含文本内容】</div><div class="type-label">【有效】不设置宽度 + 单个【块元素】标签</div><div style="background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div><div class="type-label">【有效】不设置宽度 + 单个【行内元素】标签</div><span style="background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</span><div class="type-label">【有效】不设置宽度 + 单个【行内块元素】标签</div><div style="display: inline-block; background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div>
</div>

2.2 实际效果

3. flex 布局的子项目

flex 布局的子项【包含文本内容】时，且在该子项目本身是  flex 布局的时候 text-overflow 无效。

3.1 代码

<div class="block-wrapper"><div class="label">类型二：flex 布局的子项目【包含文本内容】</div><div class="type-label">【有效】flex 容器【宽度固定】 + 块级元素子项</div><div style="background: red; display: flex; width: 200px"><!-- div 块元素 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定】+ 行级元素子项</div><div style="background: red; display: flex; width: 200px"><!-- span 行内元素 --><span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</span></div><div class="type-label">【有效】flex 容器【宽度固定】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 200px"><!-- 手动设为行内元素--><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定】+ 子项手动设为行内块元素</div><div style="background: red; display: flex; width: 200px"><!-- div 作为flex项目，又设置为 inline-block 元素 --><div style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定 百分比】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 100%"><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定 vw】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 20vw"><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label error">【无效】flex 容器【宽度固定 vw】+ 子项手动设为 flex 布局</div><div style="background: red; display: flex; width: 20vw"><div style="display: flex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div>
</div>

3.2 实际效果

解决这个无效情况很简单，就是不要给文本内容的直接父元素设置成 flex 布局就行了。

4. 三层结构以上 flex 布局

三层结构以上的 flex 布局是我们在项目实践中最常遇到的场景，因为我们现在大面积的使用 flex 布局，dom 层层嵌套。三层结构以上 flex 布局情况分为两种，一种是 flex 容器宽度固定；一种是 flex 容器宽度不固定，使用 flex-grow 等自适应。

当 flex 容器的宽度自适应 text-overflow 属性可能会失效。

4.1 代码

<div class="block-wrapper"><div class="label">类型三：三层结构以上 flex 布局</div><div class="type-label error">【无效】第三层 flex 容器【宽度固定】+ 第二层宽度自适应 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，不做任何处理 --><div><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label error">【无效】第三层 flex 容器【宽度固定】+ 第二层宽度自适应【flex-grow】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应 --><div style="display: flex; flex-grow: 1"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label">【有效】第三层 flex 容器【宽度固定】+ 第二层【overflow:hidden】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，增加 overflow:hidden --><div style="overflow: hidden"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label">【有效】第三层 flex 容器【宽度固定】+ 第二层【min-width:0】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，+ 增加 min-width:0 --><div style="display: flex; flex-grow: 1; overflow: hidden"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div>
</div>

4.2 实际效果

4.3 总结

综上所述，解决 flex 布局中 text-overflow 无效的办法有两个：

  1. 给包含文本的标签的父元素增加 overflow: hidden 【常用】
  2. 给包含文本的标签的父元素增加 min-width: 0

还要注意，不要给文本内容的直接父元素设置成 flex 布局了，要不然就回到 3 中无效的场景了。

我常用第一种方法给包含文本的标签的父元素增加 overflow: hidden，因为我很好理解 hidden 的意思就是隐藏超出的文本部分，第二种方法增加一个最小宽度显得有点莫名其妙。

但是两种方法的本质都是一样的，overflow: hidden 的本质是设置了 min-width: 0。下面是 deepseek 给出的答案：

当 Flex 子项本身也是 Flex 容器时，若未显式设置 min-width: 0，其默认 min-width: auto 会阻止宽度收缩

父容器的宽度约束会直接影响子元素的可用空间。只有父容器允许收缩（min-width: 0），子元素的 min-width: 0 才能生效。

虽然我常用 overflow:hidden 但是使用 min-width 确实不会有啥副作用，大家看自己喜欢选择。

5. 完成 vue 代码

<template><div class="page-wrapper"><div>内容过长省略号的三个属性（给文本内容的直接父元素增加）:</div><ol><li>white-space: nowrap;</li><li>overflow: hidden;</li><li>text-overflow: ellipsis;</li></ol><div class="block-wrapper"><div class="label">类型一：块元素/行内元素/行内块元素【直接包含文本内容】</div><div class="type-label">【有效】不设置宽度 + 单个【块元素】标签</div><div style="background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div><div class="type-label">【有效】不设置宽度 + 单个【行内元素】标签</div><span style="background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</span><div class="type-label">【有效】不设置宽度 + 单个【行内块元素】标签</div><div style="display: inline-block; background: red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="block-wrapper"><div class="label">类型二：flex 布局的子项目【包含文本内容】</div><div class="type-label">【有效】flex 容器【宽度固定】 + 块级元素子项</div><div style="background: red; display: flex; width: 200px"><!-- div 块元素 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定】+ 行级元素子项</div><div style="background: red; display: flex; width: 200px"><!-- span 行内元素 --><span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</span></div><div class="type-label">【有效】flex 容器【宽度固定】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 200px"><!-- 手动设为行内元素--><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定】+ 子项手动设为行内块元素</div><div style="background: red; display: flex; width: 200px"><!-- div 作为flex项目，又设置为 inline-block 元素 --><div style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定 百分比】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 100%"><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label">【有效】flex 容器【宽度固定 vw】+ 子项手动设为行内元素</div><div style="background: red; display: flex; width: 20vw"><div style="display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div><div class="type-label error">【无效】flex 容器【宽度固定 vw】+ 子项手动设为 flex 布局</div><div style="background: red; display: flex; width: 20vw"><div style="display: flex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="block-wrapper"><div class="label">类型三：三层结构以上 flex 布局</div><div class="type-label error">【无效】第三层 flex 容器【宽度固定】+ 第二层宽度自适应 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，不做任何处理 --><div><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label error">【无效】第三层 flex 容器【宽度固定】+ 第二层宽度自适应【flex-grow】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应 --><div style="display: flex; flex-grow: 1"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label">【有效】第三层 flex 容器【宽度固定】+ 第二层【overflow:hidden】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，增加 overflow:hidden --><div style="overflow: hidden"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div><div class="type-label">【有效】第三层 flex 容器【宽度固定】+ 第二层【min-width:0】 + 文本内容</div><!-- 第三层 --><div style="background: red; display: flex; width: 200px"><!-- 第二层宽度自适应，+ 增加 min-width:0 --><div style="display: flex; flex-grow: 1; overflow: hidden"><!-- 文本内容 --><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">LongTextLongTextLongTextLongTextLongTextLongText</div></div></div></div></div>
</template>
<style lang="scss" scoped>
.page-wrapper {display: flex;flex-direction: column;padding: 20px;gap: 10px;.block-wrapper {display: flex;flex-direction: column;padding: 20px;width: 100%;border: 1px solid #ccc;border-radius: 4px;.label {font-size: 16px;font-weight: bold;}.type-label {margin: 10px 0 0;&.error {color: red;}}}
}
</style>

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

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

相关文章

（二）读写分离架构、冷热分离架构

（二）读写分离架构、冷热分离架构

文章目录 读写分离架构什么是读写分离结构架构模型优缺点优点缺点 技术案例写情况读情况 冷热分离架构什么是冷热分离架构?架构模型优缺点优点 缺点技术案例读数据写数据 读写分离架构 什么是读写分离结构 读写分离架构针对于数据库。数据库原本负责读写两个功能。 读写分离架…
阅读更多...
windows中kafka4.0集群搭建

windows中kafka4.0集群搭建

参考文献 Apache Kafka windows启动kafka4.0&#xff08;不再需要zookeeper&#xff09;_kafka压缩包-CSDN博客 Kafka 4.0 KRaft集群部署_kafka4.0集群部署-CSDN博客 正文 注意jdk需要17版本以上的 修改D:\software\kafka_2.13-4.0.0\node1\config\server.properties配置文…
阅读更多...
无线通信网

无线通信网

注意区分CA&#xff08;无线&#xff09;和CD&#xff08;有线&#xff09; 无线局域网扩频技术 FHSS/DSSS 无线频谱和信道&#xff1a;2.4G/5GHz,2.4GHz共13个信道&#xff0c;3个不重叠信道 CSMA/CA&#xff0c;隐藏节点 MANET 无线安全&#xff1a;WEP、WPA、WPA2、AES/TP…
阅读更多...
嵌入式开发：基础知识介绍

嵌入式开发：基础知识介绍

一、嵌入式系统 1、介绍 以提高对象体系智能性、控制力和人机交互能力为目的&#xff0c;通过相互作用和内在指标评价的&#xff0c;嵌入到对象体系中的专用计算机系统。 2、分类 按其形态的差异&#xff0c;一般可将嵌入式系统分为&#xff1a;芯片级&#xff08;MCU、SoC&am…
阅读更多...
uv包管理器如何安装依赖?

uv包管理器如何安装依赖?

uv包管理器如何安装依赖? 输入 uv pip install 包名 uv pip install python-docx
阅读更多...
大模型驱动智能服务变革：从全流程赋能到行业纵深落地

大模型驱动智能服务变革：从全流程赋能到行业纵深落地

大模型技术的快速发展&#xff0c;正深刻改变着人工智能的研发与应用模式。作为"软硬协同、开箱即用"的智能化基础设施&#xff0c;大模型一体机通过整合计算硬件、部署平台和预置模型&#xff0c;重构了传统AI部署方式&#xff0c;成为推动AI普惠化和行业落地的重要…
阅读更多...
【MQ篇】RabbitMQ之简单模式！

【MQ篇】RabbitMQ之简单模式！

目录 引言一、 初识 RabbitMQ 与工作模式二、 简单模式 (Simple Queue) 详解&#xff1a;最直接的“点对点快递” &#x1f4ee;三、 Java (Spring Boot) 代码实战&#xff1a;让小兔子跑起来&#xff01; &#x1f430;&#x1f3c3;‍♂️四、 深入理解&#xff1a;简单模式的…
阅读更多...
Lua 第7部分 输入输出

Lua 第7部分 输入输出

由于 Lua 语言强调可移植性和嵌入性 &#xff0c; 所以 Lua 语言本身并没有提供太多与外部交互的机制 。 在真实的 Lua 程序中&#xff0c;从图形、数据库到网络的访问等大多数 I/O 操作&#xff0c;要么由宿主程序实现&#xff0c;要么通过不包括在发行版中的外部库实现。 单就…
阅读更多...
【开源】STM32HAL库移植Arduino OneWire库驱动DS18B20和MAX31850

【开源】STM32HAL库移植Arduino OneWire库驱动DS18B20和MAX31850

项目开源链接 github主页https://github.com/snqx-lqh本项目github地址https://github.com/snqx-lqh/STM32F103C8T6HalDemo作者 VXQinghua-Li7 &#x1f4d6; 欢迎交流 如果开源的代码对你有帮助&#xff0c;希望可以帮我点个赞&#x1f44d;和收藏 项目说明 最近在做一个项目…
阅读更多...
【合新通信】浸没式液冷光模块与冷媒兼容性测试技术报告

【合新通信】浸没式液冷光模块与冷媒兼容性测试技术报告

一、测试背景与核心挑战 行业需求驱动 随着800G/1.6T光模块功耗突破30W/端口&#xff0c;传统风冷已无法满足散热需求&#xff0c;浸没式液冷成为超算/AI数据中心的主流方案。冷媒兼容性是系统可靠性的关键指标&#xff0c;涉及材料腐蚀、光学性能、长期稳定性等维度。 核心…
阅读更多...
Pandas中的日期时间date处理

Pandas中的日期时间date处理

Pandas提供了强大的日期和时间处理功能&#xff0c;这对于时间序列分析至关重要。本教程将介绍Pandas中处理日期时间的主要方法。包括&#xff1a; 日期时间数据的创建和转换日期时间属性的提取时间差计算和日期运算重采样和频率转换时区处理基于日期时间的索引操作 Pandas中…
阅读更多...
Vue3文件上传组件实战：打造高效的Element Plus上传解决方案,可以对文件进行删除，查看，下载功能。

Vue3文件上传组件实战：打造高效的Element Plus上传解决方案,可以对文件进行删除，查看，下载功能。

在现代Web开发中，文件上传功能是许多应用的核心需求之一。无论是企业管理系统、内容管理系统还是医疗信息系统，上传附件的功能都至关重要。本文将分享一个基于 Vue3 和 Element Plus 实现的文件上传组件，结合父子组件的协作，展示如何构建一个功能强大、用户体验友好的文件上…
阅读更多...
AI 工程师崛起：科技浪潮下的新兴力量

AI 工程师崛起：科技浪潮下的新兴力量

在当今科技迅猛发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最热门的领域之一。随着基础模型的涌现和开源 / API 的普及&#xff0c;一种新兴的职业 ——AI 工程师&#xff0c;正逐渐崭露头角。他们在 AI 技术的应用和开发中扮演着关键角色&#xff0c;其崛…
阅读更多...
人工智能与机器学习：Python从零实现逻辑回归模型

人工智能与机器学习：Python从零实现逻辑回归模型

&#x1f9e0; 向所有学习者致敬&#xff01; “学习不是装满一桶水&#xff0c;而是点燃一把火。” —— 叶芝 我的博客主页&#xff1a; https://lizheng.blog.csdn.net &#x1f310; 欢迎点击加入AI人工智能社区&#xff01; &#x1f680; 让我们一起努力&#xff0c;共创…
阅读更多...
济南国网数字化培训班学习笔记-第二组-5节-输电线路设计

济南国网数字化培训班学习笔记-第二组-5节-输电线路设计

输电线路设计 工程设计阶段划分 35kv及以上输变电工程勘测设计全过程 可行性研究&#xff08;包括规划、工程选站&#xff09;&#xff08;包括电力系统一次二次&#xff0c;站址选择及工程设想&#xff0c;线路工程选择及工程设想&#xff0c;节能降耗分析&#xff0c;环境…
阅读更多...
【Linux网络】TCP服务中IOService应用与实现

【Linux网络】TCP服务中IOService应用与实现

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…
阅读更多...
Linux 怎么找Java程序的监听的端口

Linux 怎么找Java程序的监听的端口

Linux 怎么找Java程序的监听的端口 1、假设你知道启动该Java应用的进程ID (PID)&#xff0c;可以通过以下命令查找其监听的端口&#xff1a; 首先找到该Java应用的PID&#xff1a; ps -ef | grep xxxx-1.0-RELEASE.jar或者&#xff0c;如果你知道启动命令的一部分&#xff0…
阅读更多...
解读《数据资产质量评估实施规则》：企业数据资产认证落地的关键指南

解读《数据资产质量评估实施规则》：企业数据资产认证落地的关键指南

随着“数据要素市场”建设加速&#xff0c;数据资产逐步成为企业核心资产之一。2024年4月&#xff0c;由中国质量认证中心&#xff08;CQC&#xff09;发布的《数据资产质量评估实施规则》&#xff08;编号&#xff1a;CQC96-831160-2024&#xff09;正式实施&#xff0c;为企业…
阅读更多...
[吾爱出品] 【键鼠自动化工具】支持识别窗口、识图、发送文本、按键组合等

[吾爱出品] 【键鼠自动化工具】支持识别窗口、识图、发送文本、按键组合等

键鼠自动化工具 链接&#xff1a;https://pan.xunlei.com/s/VOOhDZkj-E0mdDZCvo3jp6s4A1?pwdfufb# 1、增加的找图点击功能&#xff08;不算增加&#xff0c;只能算缝补&#xff09;&#xff0c;各种的不完善&#xff0c;但是能运行。 2、因为受限于原程序的界面&#xff0c;…
阅读更多...
【计算机视觉】CV实战项目 - 基于YOLOv5的人脸检测与关键点定位系统深度解析

【计算机视觉】CV实战项目 - 基于YOLOv5的人脸检测与关键点定位系统深度解析

基于YOLOv5的人脸检测与关键点定位系统深度解析 1. 技术背景与项目意义传统方案的局限性YOLOv5多任务方案的优势 2. 核心算法原理网络架构改进关键点回归分支损失函数设计 3. 实战指南&#xff1a;从环境搭建到模型应用环境配置数据准备数据格式要求数据目录结构 模型训练配置文…
阅读更多...
最新文章

Copyright @ 2022~2023