文本溢出体验进阶:CSS 技巧实现单行/多行隐藏展示以及实际场景应用,确保内容可读性和布局整洁性

在这里插入图片描述

CSS文本溢出隐藏是一种常见的场景,它广泛应用于各种网页设计中,旨在确保内容的可读性和布局的整洁性,特别是在空间有限或需要适应不同屏幕尺寸的情况下。

一、文本溢出隐藏并显示省略号

1、单行文本溢出隐藏并显示省略号

对于单行文本,通常只需设置以下三个CSS属性:

.single-line-text {overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 当文本溢出时显示省略号 */white-space: nowrap; /* 禁止文本换行 */
}

应用示例:

<div class="single-line-text">这是一段非常非常非常非常非常非常长的单行文本,超出部分会被隐藏并显示省略号...
</div>

在这个例子中,当文本长度超过其容器的宽度时,超出的部分将会被隐藏,同时在文本末尾显示省略号(…),表示文本已被截断。

2、多行文本溢出隐藏并显示省略号

多行文本的溢出隐藏并显示省略号稍微复杂一些,因为CSS标准本身并不直接支持多行文本的text-overflow: ellipsis。不过,可以通过结合使用line-clamp属性(现代浏览器支持)和伪元素来模拟这一效果:

.multi-line-text {display: -webkit-box; /* 兼容WebKit内核浏览器,如Chrome和Safari */-webkit-line-clamp: 3; /* 显示最大3行 */-webkit-box-orient: vertical; /* 设置垂直方向上的排列方式 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 当文本溢出时显示省略号 *//* 对于非WebKit内核浏览器,可以使用以下CSS Grid方案作为备用(但不会显示省略号) */display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));max-height: .jpgem; /* 调整为所需的行高乘以最大行数 */margin-bottom: .2em; /* 为省略号留出空间(可选) */padding-right: .½em; /* 为省略号留出空间(可选) */
}/* 为非WebKit内核浏览器添加省略号(仅在支持伪元素的浏览器中有效) */
.multi-line-text::after {content: '...'; /* 添加省略号 */position: absolute;right: 0; /* 将省略号定位到右侧 */bottom: 0; /* 将省略号定位到底部 */background-color: white; /* 与背景色相同,覆盖可能的多余文本 */width: .5em; /* 省略号宽度 */height: .5em; /* 省略号高度 */line-height: .5em; /* 保持省略号居中 */text-align: center;
}

应用示例:

<div class="multi-line-text">这是一段非常非常非常非常非常非常长的多行文本,超出指定行数的部分会被隐藏并(在支持的浏览器中)显示省略号...
</div>

在这个例子中,文本将被限制为最多显示3行。当文本内容超过这个限制时,超出的部分将会被隐藏。在支持-webkit-line-clamp属性的浏览器(如基于WebKit内核的Chrome和Safari)中,会在文本末尾自动显示省略号。对于不支持该属性的浏览器,可以尝试使用CSS Grid结合伪元素模拟类似效果,尽管这可能无法精确地在最后一行显示省略号,而是简单地在容器底部附加一个省略号。

请注意,多行文本省略号的实现可能需要针对不同浏览器进行兼容性调整,因为并非所有浏览器都原生支持多行text-overflow: ellipsis。上述示例提供了一种常见的跨浏览器解决方案,但实际应用时可能需要根据目标浏览器的支持情况和项目需求进行调整。

二、文本溢出隐藏能滑动展示隐藏部分

很多时候,默认只展示一部分(单行或者多行),可以通过横向或者纵向滑动展示剩余部分而不是直接省略,体验会更好。

.scroll-text {width: 288rpx;max-height: 148rpx;overflow: scroll; /* 溢出内容可以滚动 */line-height: 44rpx;
}

应用示例:

<div class="scroll-text">这是一段非常非常非常非常非常非常长的文本,超出部分会被隐藏,纵向滑动可以查看隐藏内容
</div>

在这个例子中,当文本长度超过其容器的最高max-height时,超出的部分将会被隐藏,可以通过滑动显示被隐藏部分内容。

三、文本溢出隐藏应用场景

1. 导航菜单项或标签页标题

在有限的空间内,导航菜单项或标签页标题可能包含较长的文本。为了保持导航栏的紧凑性和美观性,可以设置溢出隐藏:

.nav-item,
.tab-title {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 100%; /* 或指定一个固定宽度 */
}

2. 卡片或列表项描述

在卡片式布局或列表视图中,每个项目的描述文本可能因内容长度差异导致整体布局不整齐。通过溢出隐藏,可以确保描述始终保持在设定的区域内:

.card-description,
.list-item-content {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 可根据需要调整行数 */-webkit-box-orient: vertical;line-height: 1.5; /* 保持适当的行间距 */
}/* 对于不支持 `-webkit-line-clamp` 的浏览器,可以使用以下备用方案 */
.card-description.fallback,
.list-item-content.fallback {max-height: 3.6em; /* 调整为期望的最大行数乘以行高 */margin-bottom: .2em; /* 为省略号留出空间 */padding-right: .5em; /* 为省略号留出空间 */position: relative;
}.card-description.fallback::after,
.list-item-content.fallback::after {content: '...';position: absolute;right: 0;bottom: 0;background-color: white; /* 与背景色相同,覆盖可能的多余文本 */width: .5em;height: .5em;line-height: .5em;text-align: center;
}

3. 表格单元格

表格中,特别是数据密集型表格,单元格内的文本可能过长,影响表格的可读性和美观性。对特定列应用溢出隐藏可以避免这种情况:

table.data-table td.long-text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}/* 如果需要支持多行省略,可以使用以下CSS Grid方案 */
table.data-table td.long-text.multiline {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));max-height: 3em; /* 调整为所需的行高乘以最大行数 */
}

4. 用户评论或消息摘要

在论坛、社交媒体或聊天应用中,用户评论或消息摘要常常需要在有限的空间内展示。使用溢出隐藏可以保持界面一致性:

.comment-summary,
.message-preview {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: ¾; /* 可根据需要调整行数 */-webkit-box-orient: vertical;
}/* 对于不支持 `-webkit-line-clamp` 的浏览器,可以使用以下备用方案 */
.comment-summary.fallback,
.message-preview.fallback {max-height: 2.¼em; /* 调整为期望的最大行数乘以行高 */margin-bottom: .2em; /* 为省略号留出空间 */padding-right: .5em; /* 为省略号留出空间 */position: relative;
}.comment-summary.fallback::after,
.message-preview.fallback::after {content: '...';position: absolute;right: 0;bottom: 0;background-color: white; /* 与背景色相同,覆盖可能的多余文本 */width: .5em;height: .5em;line-height: .5em;text-align: center;
}

5. 响应式布局中的小屏幕设备

在移动端或小屏幕设备上,为了适应窄小的视口,往往需要对内容进行缩放或截断。文本溢出隐藏在此类场景中尤为重要:

@media (max-width: 767px) {.responsive-text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;/* 或者针对多行文本使用 -webkit-line-clamp 或 CSS Grid 方案 */}
}

以上列举的场景只是文本溢出隐藏应用的一部分实例,实际上,只要涉及到需要控制文本展示范围以保持布局稳定或视觉美感的地方,都可能用到这一技术。开发者应根据具体的设计需求和浏览器兼容性选择合适的实现方法。

在这里插入图片描述

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

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

相关文章

form的作用

HTML中的<form>标签主要用于收集用户输入的数据&#xff0c;并在用户提交表单时将这些数据发送到服务器进行处理。<form>标签及其内部的元素&#xff08;如<input>, <textarea>, <select>等&#xff09;一起构成了一个表单&#xff0c;用户可以通…

paho-mqtt 库揭秘

文章目录 **paho-mqtt 库揭秘**第一部分&#xff1a;背景介绍第二部分&#xff1a;paho-mqtt 是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第七部…

【C语言笔记】dll库“__declspec”属性关键字总结,dllexport,dllimport

dll库“__declspec”属性关键字总结&#xff0c;dllexport&#xff0c;dllimport 一&#xff0c;简介二&#xff0c;介绍2.1 __declspec(dllexport)示例&#xff1a;1&#xff0c;extern "C"&#xff1a;2&#xff0c;__declspec(dllexport)&#xff1a; 2.2 __decls…

Swift-25-普通函数、闭包函数与Lamda表达式编程

函数 语法定义 先来看下swift中函数的定义&#xff0c;函数用关键字func来指定&#xff0c;语法相对复杂一点&#xff0c;主要有下列4种基本情况&#xff0c;还有比较复杂的&#xff0c;会在后续详细讲解。 无参函数定义 有参函数定义 一个简单的函数和函数调用示例如下&…

分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测

分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测 目录 分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类…

A1322 电烙铁发热芯热电偶温度与电压数据

就是这种四根线比较细的发热芯&#xff1a; 两根红色线是发热丝&#xff0c;另外两根是热电偶线&#xff0c;透明线是正极&#xff0c;不能搞错了。 非常粗略的测了一下&#xff0c;根本没有考虑误差。拿万用表直接测量热电偶的输出电压&#xff1b;用可调电源手动调节电压&am…

suse15 系统分区信息损坏修复案例一则

关键词 suse linux、系统分区fdisk、分区类型testdisk、grub2、bios There are many things that can not be broken&#xff01; 如果觉得本文对你有帮助&#xff0c;欢迎点赞、收藏、评论&#xff01; 一、问题现象 业务反馈一台suse服务器&#xff0c;因错误执行了fdisk分区…

TCP三次握手的原因

三次握手才可以阻止重复历史连接的初始化&#xff08;主要原因&#xff09;三次握手才可以同步双方的初始序列号三次握手才可以避免资源浪费为了确认双方的接收能力和发送能力都正常 为了实现可靠传输&#xff0c; 通信双方需要判断自己已经发送的数据包是否都被接收方收到&…

Linux 服务器硬件及RAID配置实战

服务器详解 服务器分类 可以分为&#xff1a;塔式服务器、机架服务器、刀片服务器、机柜服务器等。 其中以机架式居多 服务器架构 服务器品牌&#xff1a; 戴尔、AMD、英特尔、惠普、华为、华3&#xff08;H3C&#xff09;、联想、浪潮、长城 服务器规格&#xff1a; 规格…

【 C++ 】 讲解与实现 对数器接口

什么是对数器 说是叫对数器&#xff0c;但我觉得叫做核验器更好。 为什么&#xff1f;因为其作用是核验算法是否正确&#xff0c;所以我觉得叫核验器更好。 注意&#xff1a;本文实现的是生成只能int类型的对数器&#xff0c;其余类型不支持。 对数器的原理 对于一个核验器&am…

怎么用手机远程控制电脑 远程控制怎么用

怎么用手机远程控制电脑&#xff1a;远程控制怎么用 在这个科技日新月异的时代&#xff0c;远程控制电脑已经成为了很多人的需求。有时&#xff0c;我们可能在外出时突然需要访问家中的电脑&#xff0c;或者在工作中需要远程操控办公室的电脑。这时&#xff0c;如果能用手机远…

layui框架实战案例(27):弹出二次验证

HTML容器 <button class"layui-btn layui-btn-sm layui-btn-danger" lay-event"delete"><i class"layui-icon layui-icon-delete"></i>批量删除</button>删除封装函数 function delAll(school_id, school_name) {var lo…

Springboot+Vue项目-基于Java+MySQL的网上超市系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

【信号处理】基于EEG脑电信号的自闭症预测典型方法实现

理论 自闭者主要受到遗传和环境因素的共同影响。由于自闭症是一种谱系障碍&#xff0c;因此每个自闭症患者都有独特的优势和挑战。自闭症患者学习、思考和解决问题的方式可以是高技能的&#xff0c;也可以是严峻的挑战。研究表明&#xff0c;高质量的早期干预可以改善学习、沟…

ZStack教育云计算解决方案入选高质量数字化转型技术解决方案集

近日&#xff0c;中国信通院“铸基计划”《高质量数字化转型技术解决方案&#xff08;2023年度&#xff09;》&#xff08;以下简称“方案集”&#xff09;发布&#xff0c;云轴科技ZStack智慧教育云计算解决方案入选《高质量数字化转型技术解决方案集》。 为促进数字化转型相…

第63天:服务攻防-框架安全CVE 复现DjangoFlaskNode.JSJQuery

目录 思维导图 案例一&#xff1a;JavaScript-开发框架安全-Jquery&Node node.js目录穿越 CVE-2021-21315命令执行 Jquery CVE-2018-9207 案例二&#xff1a;Python-开发框架安全-Django&Flask django cve_2019_14234 CVE-2021-35042 flask ssti 思维导图 案…

Cocos Creator 节点的相关组件介绍与组件化代码开发详解

前言 Cocos Creator 它基于 JavaScript 和 TypeScript&#xff0c;并且提供了可视化编辑器&#xff0c;让开发者可以快速创建游戏。在 Cocos Creator 中&#xff0c;节点是游戏中的基本元素&#xff0c;所有的游戏对象都是由节点组成的。节点可以包含各种组件&#xff0c;组件…

目标检测YOLO实战应用案例100讲-基于多尺度特征融合的水下小目标检测方法研究(中)

目录 基于自监督对比学习的水下目标检测方法 4.1基于自监督对比学习的水下目标检测

Jenkins和gitlab实现CICD

1 背景 在开发TracerBackend服务的时候&#xff0c;每次更改代码之后需要推送到gitlab&#xff0c;然后ssh登录到Ubuntu的服务器上部署新的代码。服务成功启动之后&#xff0c;在本地执行测试用例&#xff0c;觉得这一套操作流程还是挺复杂的。想起公司的代码发布流程&#xf…

OllamaFunctions 学习笔记

OllamaFunctions 学习笔记 0. 引言1. 使用方法2. 用于提取 0. 引言 此文章展示了如何使用 Ollama 的实验性包装器&#xff0c;为其提供与 OpenAI Functions 相同的 API。 1. 使用方法 您可以按照与初始化标准 ChatOllama 实例类似的方式初始化 OllamaFunctions&#xff1a; …