当前位置: 首页 > 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…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...