当前位置: 首页 > news >正文

CSS 实现文本溢出省略号显示,含单行与多行文本溢出

🚀 个人简介:某大型国企资深软件研发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养🥰
📝 专    栏:HTML5与CSS3 🎉

🌈 创作不易,如果能帮助到带大家,欢迎 收藏+关注 哦 💕

要使用 CSS 实现文本溢出时显示省略号,可以通过以下几种方法来实现:

1. 单行文本溢出

对于单行文本溢出显示省略号,可以使用以下 CSS 属性:

.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px; /* 设置元素宽度 */border: 1px solid #ccc; /* 可选,用于展示边框 */
}
示例 HTML:
<div class="ellipsis">这是一个示例文本,用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>

2. 多行文本溢出

对于多行文本溢出显示省略号,可以使用以下 CSS 属性:

.multiline-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;width: 200px; /* 设置元素宽度 */border: 1px solid #ccc; /* 可选,用于展示边框 */line-clamp: 3;-webkit-line-clamp: 3; /* 设置显示的行数 */line-height: 20px; /* 设置行高 */height: 60px; /* 根据行高和行数设置容器高度 */
}
示例 HTML:
<div class="multiline-ellipsis">这是一个示例文本,用于展示如何使用 CSS实现多行文本溢出时显示省略号。这是一个示例文本,用于展示如何使用 CSS实现多行文本溢出时显示省略号。这是一个示例文本,用于展示如何使用 CSS实现多行文本溢出时显示省略号。
</div>

3. 使用 Flexbox 实现文本溢出

如果你的布局是基于 Flexbox 的,你也可以结合 text-overflow: ellipsis 属性实现文本溢出显示省略号。

.flex-ellipsis-container {display: flex;width: 200px; /* 设置容器宽度 */
}.flex-ellipsis {flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border: 1px solid #ccc; /* 可选,用于展示边框 */
}
示例 HTML:
<div class="flex-ellipsis-container"><div class="flex-ellipsis">这是一个示例文本,用于展示如何使用 CSS 实现文本溢出时显示省略号。</div>
</div>

 以上方法可以帮助你在不同场景下实现文本溢出时显示省略号。单行文本溢出使用 white-space: nowrap;overflow: hidden; 和 text-overflow: ellipsis;,而多行文本溢出则需要结合 -webkit-line-clamp 和 -webkit-box 属性。根据具体的布局需求,还可以结合 Flexbox 等布局方式来实现。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家点点收藏+关注~💕 

 更多专栏订阅推荐:

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战 

 

相关文章:

CSS 实现文本溢出省略号显示,含单行与多行文本溢出

&#x1f680; 个人简介&#xff1a;某大型国企资深软件研发工程师&#xff0c;信息系统项目管理师、CSDN优质创作者、阿里云专家博主&#xff0c;华为云云享专家&#xff0c;分享前端后端相关技术与工作常见问题~ &#x1f49f; 作 者&#xff1a;码喽的自我修养&#x1f9…...

Redis中String命令的基础操作

文章目录 Redis中String命令的基础操作一、引言二、String类型的基础命令1、设置与获取值1.1、SET命令1.2、GET命令 2、字符串操作2.1、APPEND命令2.2、GETRANGE命令2.3、SETRANGE命令2.4、STRLEN命令 3、数值操作3.1、INCR命令3.2、DECR命令3.3、INCRBY和DECRBY命令 三、应用场…...

策略模式+模版模式+工厂模式

工厂模式&#xff1a; &#xff08;1&#xff09;避免类中出现过多的组合依赖 &#xff08;2&#xff09;同时减少代码中出现过多的if...else if...语句 &#xff08;2&#xff09;将调用者跟我们的实现类解耦 模版模式&#xff1a; &#xff08;1&#xff09;功能复用 &…...

云计算平台层(PaaS)指的是什么?常见的应用场景盘点

云计算平台层(PaaS)指的是什么&#xff1f;云计算平台层&#xff08;PaaS&#xff09;&#xff0c;全称PlatformasaService&#xff08;平台即服务&#xff09;&#xff0c;是云计算服务的一种重要模式。为用户提供了一个基于云端的开发和部署环境&#xff0c;允许用户开发、运…...

搜索引擎简介

搜索引擎架构 整个搜索引擎分为三个系统 爬虫系统 索引系统 线上搜素服务 爬虫系统 爬虫分为两个阶段&#xff1a; 第一阶段&#xff1a;根据目标网站的列表页&#xff0c;爬对应的文档 URL 第二阶段&#xff1a;根据文档 URL&#xff0c;下载文档内容 触发器&#xff1…...

每天认识几个maven依赖(aislib+A1TRMI+Andromda+Annogen)

十七、aislib 1、是什么&#xff1f; aislib用于与人工智能&#xff08;AI&#xff09;相关的任务。这可能包括支持机器学习、数据分析或其他 AI 功能的工具。用于集成或扩展 AI 功能到 Java 项目中。 2、有什么用&#xff1f; 机器学习&#xff1a; 提供各种机器学习算法和…...

每日算法1(快慢指针)

通过一道题来了解快慢指针 这是一道力扣的算法题&#xff0c;首先来读题&#xff0c;是删除链表的中间元素&#xff0c;先来分析一下题&#xff0c;链表一共有三种可能&#xff0c;第一种是空链表&#xff0c;第二种链表的个数是偶数&#xff0c;第三种是链表的个数是奇数&…...

基于RealSense D435相机简单实现手部姿态重定向

基于Intel RealSense D435 相机和 MediaPipe的手部姿态检测&#xff0c;进一步简单实现手部姿态与机器人末端的重定向。 假设已经按照【基于 RealSenseD435i相机实现手部姿态检测】配置好所需的库和环境&#xff0c;并且有一个可以控制的机器人接口。 一、手部姿态重定向介绍 …...

Linux下搭建iSCSI共享存储-Tgt

Linux下搭建iSCSI共享存储-Tgt 在Linux上使用tgt搭建iSCSI共享存储&#xff0c;可以实现多个客户端同时访问共享存储。 1. 安装iSCSI Target软件包 使用下面命令安装&#xff1a; # centos sudo yum install scsi-target-utils sudo systemctl status tgtd# ubuntu sudo ap…...

js中正则表达式中【exec】用法深度解读

exec() 是 JavaScript 正则表达式对象&#xff08;RegExp&#xff09;中的一个方法&#xff0c;用于匹配字符串中的特定模式&#xff0c;并返回匹配结果。它比 test() 和 match() 更强大&#xff0c;因为它不仅仅返回匹配成功与否&#xff0c;还返回匹配的具体内容及其相关信息…...

Dockerfile的详解与案例

《Dockerfile 详解与案例》 一、Dockerfile 简介 Dockerfile 是一个用来构建 Docker 镜像的文本文件&#xff0c;它包含了一系列指令&#xff0c;用于描述如何创建一个 Docker 镜像。通过 Dockerfile&#xff0c;你可以定义镜像的基础环境、安装软件包、设置环境变量等操作&a…...

[spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范

文章目录 一. MyBatis XML配置文件1. 配置链接字符串和MyBatis2. 写持久层代码方法定义Interface方法实现xml测试 3. 增删改查增:删改查 二. 开发规范(mysql)三. 其他查询操作1. 多表查询2. #{} 和 ${}(面试题)使用区别 排序功能like查询 三. 数据库连接池 一. MyBatis XML配置…...

[产品管理-33]:实验室技术与商业化产品的距离,实验室技术在商业化过程中要越过多少道“坎”?

目录 一、实验室技术 1.1 实验室研究性技术 1.2 技术发展的S曲线 技术发展S曲线的主要阶段和特点 技术发展S曲线的意义和应用 二、实验室技术商业化的路径 2.1 实验室技术与商业化产品的距离 1、技术成熟度与稳定性 - 技术自身 2、市场需求与适应性 - 技术是满足需求 …...

【有啥问啥】 Self-Play技术:强化学习中的自我进化之道

Self-Play技术&#xff1a;强化学习中的自我进化之道 在人工智能的快速发展中&#xff0c;强化学习&#xff08;Reinforcement Learning, RL&#xff09;已成为推动智能体自主学习与优化的关键力量。Self-Play技术&#xff0c;作为强化学习领域的一项前沿创新&#xff0c;通过…...

LCR 008. 长度最小的子数组

文章目录 1.题目2.思路3.代码 1.题目 LCR 008. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符合条件…...

uniApp 解决uniapp三方地图获取位置接口的请求次数限制问题,分别提供 Android 和 iOS 的实现方法(原生插件获取)

以下是使用 UniApp 编写获取位置信息的原生插件步骤&#xff0c;这里分别提供 Android 和 iOS 的实现方法。 一、Android 端实现 创建原生插件模块 在 UniApp 项目目录下创建一个目录&#xff0c;比如 nativeplugins/android/locationPlugin。使用 Android Studio 创建一个 An…...

Zabbix Agent 监控 MySQL 进程状态

1. 使用 Zabbix Agent 监控 MySQL 进程状态 这是最简单的方式,通过 Zabbix Agent 监控 MySQL 进程是否在运行。具体步骤如下: 步骤1: 确认 MySQL 进程的名称 在你的 CentOS 服务器上,运行以下命令来确认 MySQL 进程的名称: ps aux | grep mysql通常,MySQL 服务的进程名…...

【模型】感知器

感知器是最早的人工神经网络之一&#xff0c;也是现代深度学习的基础之一。 1. 感知器&#xff08;Perceptron&#xff09; 1.1 定义与功能 感知器是一种线性二分类模型&#xff0c;旨在模拟生物神经元的基本功能。它通过对输入特征进行加权求和&#xff0c;并应用激活函数来…...

HtmlCss 基础总结(基础好了才是最能打的)五

Html&Css 基础学习回顾总结 Html&Css 基础总结&#xff08;基础好了才是最能打的&#xff09;一 Html&Css 基础总结&#xff08;基础好了才是最能打的&#xff09;二 Html&Css 基础总结&#xff08;基础好了才是最能打的&#xff09;三 Html&Css 基础总结…...

图神经网络实战——分层自注意力网络

图神经网络实战——分层自注意力网络 0. 前言1. 分层自注意力网络1.1 模型架构1.2 节点级注意力1.3 语义级注意力1.4 预测模块 2. 构建分层自注意力网络相关链接 0. 前言 在异构图数据集上&#xff0c;异构图注意力网络的测试准确率为 78.39%&#xff0c;比之同构版本有了较大…...

避坑指南:Dify 1.3.1 Docker-Compose部署时,除了镜像拉取慢,你还会遇到的3个典型错误

Dify 1.3.1 Docker-Compose部署实战&#xff1a;3个隐藏陷阱与深度排错指南 当你决定在生产环境部署Dify 1.3.1时&#xff0c;Docker-Compose看似简单的up -d命令背后可能暗藏玄机。本文将从真实故障场景出发&#xff0c;解剖那些官方文档未曾提及的"暗坑"——它们不…...

别再混着用了!Matplotlib的两种画图接口(plt.plot vs. ax.plot)到底怎么选?

Matplotlib接口选择指南&#xff1a;何时用plt.plot&#xff0c;何时用ax.plot&#xff1f; 在数据可视化领域&#xff0c;Matplotlib无疑是Python生态中最强大的工具之一。但许多用户在使用过程中常常困惑&#xff1a;为什么有的代码用plt.plot()&#xff0c;有的却用ax.plot(…...

DanKoe 视频笔记:生产力提升:战术压力与深度工作策略

在本节课中&#xff0c;我们将学习一种结合了“战术压力”与“深度工作”的策略。这套方法帮助一位自称拖延症患者的人在30天内创造了70万美元的收入。我们将拆解其核心原理与具体执行步骤&#xff0c;让初学者也能理解并应用。 概述 拖延常被视为缺点&#xff0c;但本教程提…...

Linux系统auditd审计服务实战:从零配置到规则优化(附常用命令大全)

Linux系统auditd审计服务实战&#xff1a;从零配置到规则优化&#xff08;附常用命令大全&#xff09; 当服务器遭遇入侵时&#xff0c;大多数管理员的第一反应往往是查看历史命令记录。但现实情况是&#xff0c;黑客通常会第一时间清空.bash_history文件。这时&#xff0c;一个…...

C语言基础:Anything to RealCharacters 2.5D引擎核心算法解析

C语言基础&#xff1a;Anything to RealCharacters 2.5D引擎核心算法解析 1. 引言 如果你对图像处理感兴趣&#xff0c;特别是想把卡通或二次元角色转换成逼真的真人形象&#xff0c;那么Anything to RealCharacters 2.5D引擎绝对值得深入了解。这个引擎背后的算法原理其实并…...

终极Emscripten编译缓存策略:加速WebAssembly项目构建的完整指南

终极Emscripten编译缓存策略&#xff1a;加速WebAssembly项目构建的完整指南 【免费下载链接】emscripten Emscripten: An LLVM-to-WebAssembly Compiler 项目地址: https://gitcode.com/gh_mirrors/em/emscripten Emscripten作为一款强大的LLVM-to-WebAssembly编译器&a…...

从LDF文件看LIN调度:为什么说‘可预测性’是汽车低端总线的灵魂?

从LDF文件看LIN调度&#xff1a;为什么说‘可预测性’是汽车低端总线的灵魂&#xff1f; 当你按下车窗按钮时&#xff0c;那个瞬间发生的升降动作背后&#xff0c;隐藏着一套精密的通信协议在默默运作。不同于高端车载网络CAN总线的复杂仲裁机制&#xff0c;LIN总线以其独特的&…...

三步搞定全网资源下载:手把手教你使用res-downloader网络资源嗅探工具

三步搞定全网资源下载&#xff1a;手把手教你使用res-downloader网络资源嗅探工具 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: http…...

CHORD-X与Matlab仿真联动:战术场景生成与效果评估

CHORD-X与Matlab仿真联动&#xff1a;战术场景生成与效果评估 最近在做一个挺有意思的项目&#xff0c;需要验证一个智能感知系统在复杂动态场景下的表现。这个系统叫CHORD-X&#xff0c;它专门处理视频流&#xff0c;能识别和追踪画面里的多个目标。但问题来了&#xff0c;我…...

【C++:红黑树】4 条规则深度理解红黑树:从原理、变色、旋转到完整实现代码

&#x1f525;小叶-duck&#xff1a;个人主页 ❄️个人专栏&#xff1a;《Data-Structure-Learning》《C入门到进阶&自我学习过程记录》 《算法题讲解指南》--优选算法 《算法题讲解指南》--递归、搜索与回溯算法 《算法题讲解指南》--动态规划算法 ✨未择之路&#xff0…...