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

CSS实现单行、多行文本溢出显示省略号(…)

在网页设计中,我们常常遇到这样的情况:文本内容太长,无法完全显示在一个固定的区域内。为了让界面看起来更整洁,我们可以使用省略号()来表示内容溢出。这不仅能提升用户体验,还能避免内容溢出导致的页面混乱。

本文将介绍如何用 CSS 实现 单行文本溢出省略号多行文本溢出省略号

1. 单行文本溢出省略号

对于单行文本溢出省略号,CSS 提供了一个非常简单的解决方案,只需要使用几个常见的属性即可。

代码示例:

<div class="single-line">这是一段非常长的文本,如果文本内容超过了这个容器的宽度,它会显示省略号。
</div>
.single-line {width: 200px;           /* 设置容器宽度 */white-space: nowrap;    /* 不换行 */overflow: hidden;       /* 超出容器的部分隐藏 */text-overflow: ellipsis; /* 超出的部分用省略号表示 */
}

解释:

  • white-space: nowrap;:禁止文本换行,让文本保持在同一行。
  • overflow: hidden;:隐藏超出容器的内容。
  • text-overflow: ellipsis;:在文本超出容器时显示省略号。

通过这三个属性,文本会在容器宽度不足时自动显示省略号。

2. 多行文本溢出省略号

有时,我们希望文本是多行的,并且当文本超过指定行数时也显示省略号。这个功能在网页中非常常见,比如新闻摘要、文章简介等。

代码示例:

<div class="multi-line">这是一个多行文本示例。如果文本太长,它将显示省略号。你可以继续添加更多的内容,直到它超出设置的行数。
</div>
.multi-line {width: 300px;             /* 设置容器宽度 */height: 60px;             /* 设置固定高度(显示两行文本) */line-height: 30px;        /* 行高,确保文本正常显示 */overflow: hidden;         /* 超出部分隐藏 */display: -webkit-box;     /* 使用 Flexbox 布局 */-webkit-box-orient: vertical; /* 设置盒子为垂直方向排列 */-webkit-line-clamp: 2;    /* 限制显示的行数 */text-overflow: ellipsis;  /* 超出部分用省略号表示 */
}

解释:

  • display: -webkit-box;:让元素使用 WebKit 盒子模型布局(主要是为了兼容 Webkit 引擎的浏览器,如 Chrome 和 Safari)。
  • -webkit-box-orient: vertical;:设置布局为垂直方向,使文本按行显示。
  • -webkit-line-clamp: 2;:限制显示的行数,2 表示最多显示两行文本,超出的部分会被省略。
  • text-overflow: ellipsis;:超出部分显示省略号。

注意事项:

  • -webkit-line-clamp 是一个 WebKit 特有的 CSS 属性,因此它在某些浏览器(如 Firefox)中可能不被支持。
  • 多行溢出效果并非所有浏览器都支持,特别是 Firefox 在某些版本中可能没有实现这一特性,具体支持情况可以参考各浏览器的文档。

总结

使用 CSS 实现单行和多行文本溢出显示省略号是一个非常常见且简单的功能,可以大大提升网页的排版和用户体验。在单行文本溢出时,使用 text-overflow: ellipsis 配合 white-space: nowrapoverflow: hidden 就可以实现。而对于多行文本溢出,可以借助 Webkit 提供的 -webkit-line-clamp 来限制显示的行数并加上省略号。

相关文章:

CSS实现单行、多行文本溢出显示省略号(…)

在网页设计中&#xff0c;我们常常遇到这样的情况&#xff1a;文本内容太长&#xff0c;无法完全显示在一个固定的区域内。为了让界面看起来更整洁&#xff0c;我们可以使用省略号&#xff08;…&#xff09;来表示内容溢出。这不仅能提升用户体验&#xff0c;还能避免内容溢出…...

服务器中部署大模型DeepSeek-R1 | 本地部署DeepSeek-R1大模型 | deepseek-r1部署详细教程

0. 部署前的准备 首先我们需要足够算力的机器&#xff0c;这里我在vultr中租了有一张A16显卡一共16GB显存的服务器作为演示。部署的模型参数为14b的。如果需要部署满血版本671b的&#xff0c;需要更大的算力支持&#xff0c;这里由于是个人资金有限&#xff0c;就演示14b的部署…...

元学习之孪生网络Siamese Network

简介&#xff1a;元学习是一种思想&#xff0c;一般以神经网络作为特征嵌入的工具&#xff0c;实现对数据特征的提取&#xff0c;然后通过构造某种指标以引导优化器对模型参数进行优化。而最小化距离是最常见的学习目标&#xff0c;这就是熟知的度量学习&#xff0c;度量学习里…...

深入HBase——引入

引入 前面我们通过深入HDFS到深入MapReduce &#xff0c;从设计和落地&#xff0c;去深入了解了大数据最底层的基石——存储与计算是如何实现的。 这个专栏则开始来看大数据的三驾马车中最后一个。 通过前面我们对于GFS和MapReduce论文实现的了解&#xff0c;我们知道GFS在数…...

Python创建FastApi项目模板

1. 项目结构规范 myproject/ ├── app/ │ ├── core/ # 核心配置 │ │ ├── config.py # 环境配置 │ │ └── security.py # 安全配置 │ ├── routers/ # 路由模块 │ │ └── users.py # 用户路由 │ ├…...

TCNE 网络安全

一.概况 CTF&#xff08;Capture The Flag&#xff09;在网络安全领域中指的是网络技术人员之间进行技术竞技的一种比赛形式&#xff0c;它起源于1996年的DEFCON全球黑客大会&#xff0c;以代替之前黑客们通过互相发起真实攻击进行技术比拼的方式&#xff0c;现已成为全球范围网…...

车规MCU处理器选择Cortex-M7还是Cortex-R52?

车规mcu处理器选择Cortex-M7还是Cortex-R52&#xff1f;跟随小编从具体应用场景、安全等级&#xff08;ASIL&#xff09;、性能、成本进行分析吧。 01安全等级需求 ASIL-D&#xff08;如刹车、转向&#xff09;→ 必选R52。R52原生支持ASIL-D&#xff0c;硬件级错误检测&#…...

什么是计算机中的 “终端”?

在我们初学编程的时候&#xff0c;会遇到一个很重要的概念 ——终端。那它到底是什么呢&#xff1f; 在计算机领域&#xff0c;终端就像是我们和计算机进行对话的 “窗口”。我们可以在这个窗口里&#xff0c;用一些特定的命令来告诉计算机该做什么。比如&#xff0c;让计算机…...

LeetCode刷题---字符串---819

最常见的单词 819. 最常见的单词 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 给你一个字符串 paragraph 和一个表示禁用词的字符串数组 banned &#xff0c;返回出现频率最高的非禁用词。题目数据 保证 至少存在一个非禁用词&#xff0c;且答案 唯一 。 par…...

SSH IBM AIX服务器相关指标解读

&#xff08;一&#xff09;ZPU使用率 含义 在IBM AIX服务器中&#xff0c;ZPU使用率反映了特定处理单元&#xff08;ZPU&#xff0c;假设是某种自定义或特定环境下的处理单元&#xff09;的资源利用程度。它表示ZPU在一段时间内处于忙碌状态执行任务的时间比例。例如&#xff…...

Wireshark TS | 再谈虚假的 TCP Spurious Retransmission

前言 在之前的《虚假的 TCP Spurious Retransmission》文章中曾提到一个错误判断为 TCP Spurious Retransmission&#xff0c;实际为 TCP Out-Of-Order 的案例&#xff0c;本次继续探讨一个虚假的 TCP Spurious Retransmission 案例。 问题背景 TCP Spurious Retransmission…...

基于kafka、celery的日志收集报警项目

项目环境&#xff1a;centOS7.9 mariadb5.6 celery5.0 kafka3.6.1 项目时间&#xff1a;2025年1月 项目描述&#xff1a;这个项目搭建了一个基于 Nginx 和 Flask 的 Web 集群&#xff0c;使用 Filebeat 将 Nginx 的访问日志发送到 Kafka 集群。通过 Python 消费者程序解析日志…...

QML使用ChartView绘制饼状图

一、工程配置 首先修改CMakeLists.txt&#xff0c;按下图修改&#xff1a; find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Widgets) PRIVATEtarget_link_libraries(appuntitledPRIVATE Qt6::QuickPRIVATE Qt6::Widgets )其次修改main.cpp&#xff0c;按下图修改&#xff…...

头歌实验--面向对象程序设计

目录 实验五 类的继承与派生 第1关&#xff1a;简易商品系统 任务描述 答案代码 第2关&#xff1a;公司支出计算 任务描述 答案代码 第3关&#xff1a;棱柱体问题 任务描述 答案代码 实验五 类的继承与派生 第1关&#xff1a;简易商品系统 任务描述 答案代码 #incl…...

DeepSeek-R1 蒸馏 Qwen 和 Llama 架构 企业级RAG知识库

“DeepSeek-R1的输出&#xff0c;蒸馏了6个小模型”意思是利用DeepSeek-R1这个大模型的输出结果&#xff0c;通过知识蒸馏技术训练出6个参数规模较小的模型&#xff0c;以下是具体解释&#xff1a; - **知识蒸馏技术原理**&#xff1a;知识蒸馏是一种模型压缩技术&#xff0c;核…...

App UI自动化--Appium学习--第二篇

如果第一篇在运行代码的时候出现问题&#xff0c;建议参考我的上一篇文章解决。 1、APP界面信息获取 adb logcat|grep -i displayed代码含义是获取当前应用的包名和界面名。 根据日志信息修改代码当中的包名和界面名&#xff0c;就可以跳转对应的界面。 2、界面元素获取 所…...

【SpringBoot实现全局API限频】 最佳实践

在 Spring Boot 中实现全局 API 限频&#xff08;Rate Limiting&#xff09;可以通过多种方式实现&#xff0c;这里推荐一个结合 拦截器 Redis 的分布式解决方案&#xff0c;适用于生产环境且具备良好的扩展性。 方案设计思路 核心目标&#xff1a;基于客户端标识&#xff08…...

Day1 25/2/14 FRI

【一周刷爆LeetCode&#xff0c;算法大神左神&#xff08;左程云&#xff09;耗时100天打造算法与数据结构基础到高级全家桶教程&#xff0c;直击BTAJ等一线大厂必问算法面试题真题详解&#xff08;马士兵&#xff09;】https://www.bilibili.com/video/BV13g41157hK?p3&v…...

开发板适配之I2C-RTC

rx8010时钟芯片挂载在I2C1总线上&#xff0c;并且集成在主控板上。 硬件原理 IOMUX配置 rx8010时钟芯片挂载在I2C1总线上&#xff0c;I2C1数据IIC1_SDA和时钟IIC1_SCL&#xff0c;分别对应的PAD NAME为&#xff0c;UART4_TX_DATA、UART4_RX_DATA。 在arch/arm/boot/dts/imx6u…...

vuedraggable固定某一item的记录

文章目录 基础用法第一种第二种 限制itemdiaggable重新排序交换移动的两个元素的次序每次都重置item的index 基础用法 第一种 <draggable v-model"list" :options"dragOptions"><div class"item" v-for"item in list" :key…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...