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

css内容省略——text-overflow: ellipsis

news 来源：原创 2025/8/15 0:45:36

title: css内容省略
date: 2025-05-07 19:41:17
tags: css

text-overflow: ellipsis

text-overflow: ellipsis用于在文本溢出容器时显示省略号(…)

1.单行省略

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单行文本省略示例</title><style>.ellipsis {width: 200px;white-space: nowrap;      /* 禁止换行 */overflow: hidden;         /* 隐藏溢出内容 */text-overflow: ellipsis;  /* 显示省略号 */border: 1px solid #ccc;padding: 8px;margin: 20px 0;}</style>
</head>
<body><div class="ellipsis">这是一段很长的文本内容，当超出容器宽度时会显示省略号...</div><div class="ellipsis">短文本</div>
</body>
</html>

2.多行文本省略（CSS3方法）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多行文本省略示例</title><style>.multiline-ellipsis {width: 300px;display: -webkit-box;          /* 老版本语法 */-webkit-line-clamp: 3;         /* 显示行数,超过就在第三行末尾显示省略号 */-webkit-box-orient: vertical;  /* 垂直排列 */overflow: hidden;              /* 隐藏溢出 */text-overflow: ellipsis;       /* 显示省略号 */border: 1px solid #ccc;padding: 8px;margin: 20px 0;line-height: 1.5;}</style>
</head>
<body><div class="multiline-ellipsis">这是一段很长的多行文本内容。当文本超过指定的行数时，会在最后一行显示省略号。这个方法使用了CSS3的-webkit-line-clamp属性，目前在现代浏览器中支持良好。需要注意这是非标准属性，但在实际项目中广泛使用。</div>
</body>
</html>

3.表格单元格中的文本省略

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格文本省略示例</title><style>table {width: 400px;border-collapse: collapse;margin: 20px 0;}th, td {border: 1px solid #ddd;padding: 8px;}.ellipsis-cell {max-width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><table><tr><th>ID</th><th>产品名称</th><th>描述</th></tr><tr><td>1</td><td>笔记本电脑</td><td class="ellipsis-cell">这是一款高性能笔记本电脑，配备最新处理器和大容量内</td></tr><tr><td>2</td><td>智能手机</td><td class="ellipsis-cell">最新款智能手机，具有超高像素摄像头和长续航电池</td></tr></table>
</body>
</html>

4. 响应式设计中的文本省略

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式文本省略示例</title><style>.responsive-ellipsis {width: 100%;max-width: 400px;margin: 20px auto;padding: 15px;background: #f5f5f5;border-radius: 4px;}.responsive-ellipsis h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px;}.responsive-ellipsis p {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;}@media (max-width: 480px) {.responsive-ellipsis p {-webkit-line-clamp: 2;}}</style>
</head>
<body><div class="responsive-ellipsis"><h3>这是一个非常非常长的标题，在小屏幕上会被截断并显示省略号</h3><p>这里是详细内容描述。在较大的屏幕上，我们会显示最多3行文本，超过部分显示省略号。而在移动设备上（宽度小于480px），我们只显示2行文本。这样可以确保在不同设备上都有良好的阅读体验，同时保持布局整洁。</p></div>
</body>
</html>

关键点总结

必须配合的属性：
- white-space: nowrap（单行）
- overflow: hidden
- 固定宽度或最大宽度
多行省略的限制：
- 使用 -webkit-line-clamp（非标准属性但广泛支持）
- 需要 display: -webkit-box 或 display: -webkit-inline-box
浏览器兼容性：
- 单行省略：所有主流浏览器支持
- 多行省略：现代浏览器支持（Chrome, Safari, Edge, Firefox 68+）

css内容省略——text-overflow: ellipsis

title: css内容省略 date: 2025-05-07 19:41:17 tags: css text-overflow: ellipsis text-overflow: ellipsis用于在文本溢出容器时显示省略号(…) 1.单行省略 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"&g…...

编程日记 2025/8/15 0:45:36

nginx性能优化与深度监控

一、性能调优方向 1. 系统层面优化内核参数调整 TCP队列与连接管理： net.core.somaxconn（最大连接队列长度，建议设为65535）net.ipv4.tcp_max_syn_backlog（SYN队列长度，建议65535）net.ipv4.tc…...

编程日记 2025/8/15 0:45:34

leetcode 70.爬楼梯（c++详细最全解法+补充知识）

目录题目解答过程补充哈希表知识哈希表基本特性常用成员函数基本用法实现代码 1.递归 2.循环遍历 3.哈希表题目假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 示例 1&#…...

编程日记 2025/8/15 0:45:32

护照阅读器简介

护照阅读器简介护照阅读器（Passport Reader）是一种专用设备，用于快速、准确地读取护照、身份证、签证等旅行证件的机读区（MRZ）和芯片（ePassport）信息，广泛应用于出入境管理、机场安…...

编程日记 2025/8/15 0:45:30

切片和边缘计算技术分析报告

切片和边缘计算技术分析报告一、引言随着 5G 通信技术的快速发展，网络切片和边缘计算技术逐渐成为通信领域的热点研究方向。网络切片技术通过将物理网络划分为多个逻辑上的虚拟网络，以满足不同业务场景对网络性能的差异化需求。边缘计算则将计算、存…...

编程日记 2025/8/14 18:54:44

vue3笔记（自存）

1. Vue3简介 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n 经历了：4800次提交、40个RFC、600次PR、300贡献者官方发版地址：Release v3.0.0 One Piece vuejs/core 截止2023年10月，最…...

编程日记 2025/8/14 17:50:01

多线服务器具有什么优势

在当今数字化飞速发展的时代，多线服务器宛如一位低调的幕后英雄，默默为我们的网络世界提供着强大的支持。那么，多线服务器到底具有哪些令人瞩目的优势呢首先，多线服务器的最大优势之一就是网络访问的高速与稳定。想象一下&#x…...

编程日记 2025/8/15 0:45:28

Azure OpenAI 聊天功能全解析：Java 开发者指南

Azure OpenAI 聊天功能全解析：Java 开发者指南前言在当今人工智能飞速发展的时代，AI 驱动的文本生成技术正深刻改变着众多应用场景。Azure OpenAI 作为这一领域的重要参与者，由 ChatGPT 提供支持，不仅具备传统 OpenAI 的功能&…...

编程日记 2025/8/15 0:45:26

【情感关系】健全自我

一些看到后深有感触的文字请大家无论如何也不要相信这种：“童年/原生家庭经历决定人生走向”的论调。过去可以影响我们但是无法主宰我们，人是有主观能动意识的，认识自己的问题就是改变人生轨迹的第一步。后来我们会发现，对于…...

编程日记 2025/8/15 0:45:24

SLAM:单应矩阵，本质矩阵，基本矩阵详解和对应的c++实现

单应矩阵（Homography Matrix）单应矩阵（Homography Matrix）是计算机视觉中描述同一平面在不同视角下投影变换的核心工具，广泛应用于图像校正、拼接、虚拟广告牌替换等场景。以下从原理、求解方法和C++实现三方面展开详解：一、单应矩阵的数学原理定义与作用单应矩阵是…...

编程日记 2025/8/15 0:45:23

数据报（Datagram）与虚电路（Virtual Circuit）的区别

数据报（Datagram）与虚电路（Virtual Circuit）的区别数据报和虚电路是计算机网络中两种不同的通信方式，主要区别体现在连接方式、路由选择、可靠性、延迟和适用场景等方面。以下是它们的详细对比： 1. 基本…...

编程日记 2025/8/15 0:45:21

工业现场ModbusTCP转EtherNETIP网关引领生物现场领新浪潮

生物质发生器是一种能够产生、培养生物的设备。客户现场需要将生物发生器连接到罗克韦尔系统，但是二者协议无法直接通讯，需要通过ModbusTCP转Ethernet/IP网关将两者进行通讯连接，生物质发生器以其独特的工作原理和优势，使得生物的…...

编程日记 2025/8/14 19:24:06

DeepSeek的100个应用场景

在春节前夕，浙江杭州的AI企业DeepSeek推出了其开源模型DeepSeek-R1，以仅相当于Open AI最新模型1/30的训练成本，在数学、编程等关键领域展现出媲美GPT-o1的出色性能。发布仅数日，DeepSeek-R1便迅速攀升至中美两国苹果应用商店免费榜…...

编程日记 2025/8/15 2:24:53

【Linux 系统调试】Linux 调试工具strip使用方法

‌ 目录 ‌ 一. strip 工具的定义与核心作用‌ ‌1. strip 是什么？‌ 2. strip 工具调试符号的作用‌ 3. strip 工具调试符号的重要性‌ 二. 如何确认文件是否被 strip 处理？‌ 1. 通过 file 命令检查文件状态 2. strip 的典型用法‌ ‌基础命…...

编程日记 2025/8/15 17:25:31

Solana批量转账教程：提高代币持有地址和生态用户空投代币

前言 Solana区块链因其高吞吐量和低交易费用成为批量操作（如空投）的理想选择。本教程将介绍几种在Solana上进行批量转账的方法，帮助您高效地向多个地址空投代币。 solana 账户模型在Solana中有三类账户： 数据账户，…...

编程日记 2025/8/15 2:24:49

leetcode hot100 技巧

如有缺漏谬误，还请批评指正。 1.只出现一次的数字利用异或运算相同得0的特点。所有出现过两次的数字都会在异或运算累加过程中被抵消。、 class Solution { public:int singleNumber(vector<int>& nums) {int res0;for(int i0;i<nums.size();i) re…...

编程日记 2025/8/15 2:24:47

搭建spark伪分布集群

1.先查看虚拟机的默认名称，将其修改为vm01 2.更改了主机名，还需要修改/etc/hosts文件，在这个文件设定了IP地址与主机名的对应关系，类似DNS域名服务器的功能 3.修改spark相关配置文件，包括spark-env.sh和slave两个文件 …...

编程日记 2025/8/15 2:24:46

vue3自定义audio音频播放【进度条，快进，后退，音量加减，播放速度】

本文将介绍如何使用Vue3构建一个功能完备的自定义音频播放器，包含进度条控制、快进/后退、音量调节和播放速度控制等功能。相比使用浏览器默认的audio控件，自定义播放器可以提供更一致的用户体验和更灵活的设计空间，复制粘贴即可使用&#xf…...

编程日记 2025/8/15 2:24:44

学习基本开锁知识

本文主要内容目前市面上锁的种类有哪些机械锁钥匙开锁 ：这是最常见的传统开锁方式，通过插入匹配的钥匙转动来开锁，如常见的家用门锁、汽车门锁等，钥匙形状和齿纹各异，有单排齿的一字锁、双排齿的双面锁，…...

编程日记 2025/8/15 1:58:44

泛微ECOLOGY9 流程表单中添加按钮的方法

使用场景介绍有时需要在流程表单中添加一个按钮来实现弹窗、打开指定的页面等需求。实现方式一：通过ID 在流程表单中想要生成按钮的地方指定一个ID，然后再到ecode中创建按钮及方法。具体步骤如下：一、表单中指定ID为 exceldc 二、在ecode中实现按钮及功能。 1.建立…...

编程日记 2025/8/15 2:24:40

小刚说C语言刷题—1331 做彩纸花边

1.题目描述李晓芳用一条长为 n 米的彩纸制作花边，每朵花李晓芳用一条长为 n 米的彩纸制作花边，每朵花的宽度为 x 厘米，花与花之间的间隔为 y 厘米。请问 n 米的彩纸最多能做多少朵花的花边。如，图中的案例花的宽度为 4.5cm &a…...

编程日记 2025/8/15 2:24:37

【Python】读取excel文件的时候，遇到“Excel file format cannot be determined”的问题

使用os.path 读取路径下的文件，并拼接文件名，可能会遇到这个问题： ValueError: Excel file format cannot be determined, you must specify an engine manually. 因为我用的是相对路径的拼接的方法，读取出来会有这样的问题&#…...

编程日记 2025/8/15 2:24:35

天气预报、天气查询API接口文档 | 实时天气 | 七日天气 | 15日天气查询

天气预报、天气查询API接口文档 | 实时天气 | 七日天气 | 15日天气查询这篇文章详细介绍了一种天气查询服务，提供了实时天气(1天)、7天预报和15天预报三个RESTful接口，支持通过地区名称、编码、IP或经纬度等多种方式查询，返回数据包含温度、…...

编程日记 2025/8/15 2:24:33

Linux中的线程安全与线程同步详解

在Linux系统中，线程安全性是指在多个线程同时访问共享资源时，能够确保这些共享资源不被破坏或者产生数据错误。线程同步是一种机制，用于保证多个线程之间的操作次序和协调，以避免竞态条件、死锁等问题。以下是线程安全和线程同步…...

编程日记 2025/8/15 2:24:31

qwen2.5vl

多模态大模型通用架构： 在通用的MM-LLM（Multi-Modality LLM）框架里，共有五个模块，整体以LLM为核心主干，分别在前后有一个输入、输出的投影模块（Projector），投影模块主要…...

编程日记 2025/8/15 2:24:29

国产Word处理控件Spire.Doc教程：在Java中为Word文本和段落设置边框

在 Word 文档中添加边框是一种突显重点信息的有效方式，尤其适用于包含大量文本的内容场景。相比普通格式，给字符或段落添加边框不仅能强化视觉层次，还能提升文档的专业感与可读性。E-iceblue旗下Spire系列产品是国产文档处理领域的优秀产品&a…...

编程日记 2025/8/15 1:55:13

【CUDA C实战演练】CUDA介绍、安装、C代码示例

文章目录 0. 前言1. 并行计算与异构计算1.1 并行计算（Parallel Computing）1.2 异构计算（Heterogeneous Computing） 2. CUDA 的核心概念2.1 主机（Host）与设备（Device）2.2 线程层次结构…...

编程日记 2025/8/15 17:25:50

滑动窗口——无重复字符最长的字串

题目： 子字符串，我们也可以看成子数组。题意不难理解，这个题我们暴力枚举的思路是把每一个字符遍历存到hash桶中，如果放两次就进行结果更新。但这个题我们有更优化的方法，利用数组代替hash（重点不在这&…...

编程日记 2025/8/15 2:24:23

QT中connect高级链接——指针、lambda、宏

1、connect使用指针 connect(button,&QPushButton::released,this,&MainWidget::mySlot); //【抬起】按钮button时，修改按钮b2的标题 2、使用lambda表达式引入lambda表达式，类似内联函数，可以用于不会被重用的短代码片段&#x…...

编程日记 2025/8/15 2:24:21

说说es配置项的动态静态之分和集群配置更新API

这天因为某件工作来到了es官网某个参数配置相关的页面，注意到了下图圆圈里的“Dynamic”： 链接：https://www.elastic.co/guide/en/elasticsearch/reference/8.1/modules-cluster.html#misc-cluster-settings 显然这是对配置项的一个描述&am…...

编程日记 2025/8/15 2:24:19

如何有效防御服务器DDoS攻击

分布式拒绝服务（DDoS）攻击通过大量恶意流量淹没服务器资源，导致服务瘫痪。本文将提供一套结合代码实现的主动防御方案，涵盖流量监控、自动化拦截和基础设施优化。 1. 实时流量监控与告警目标：检测异常流量并触发告警…...

编程日记 2025/8/15 2:24:17

C#上传文件到腾讯云的COS

测试环境： vs2022 .net 6控制台应用程序测试步骤如下： 1 添加子用户，目前是为了拿到secretId和secretKey，打开添加子用户界面链接：https://console.cloud.tencent.com/cam 并为子用户添加API 密钥 2 通过链接htt…...

编程日记 2025/8/15 2:24:15

强缓存与协商缓存的实现机制

文章目录前言**1. 强缓存（强制缓存）****强缓存生效流程**：**2. 协商缓存（对比缓存）****协商缓存生效流程**：**对比总结****实际应用建议** **1. 缓存配置的三种主要实现方式** 前言强缓存与协商缓存的实…...

编程日记 2025/8/15 2:24:13

【云备份】项目展示项目总结

目录一. 项目展示二. 项目总结一. 项目展示首先我们打开服务端，把没有用的东西都删干净，包括备份的文件信息啊什么的这个时候我们启动服务器我们先用浏览器去看看什么东西都没有。好，我们现在去启动客户端，下面这个是客…...

编程日记 2025/8/15 2:24:11

嵌入式 Linux Platform 驱动模型测试

文章目录一、为什么要用 Platform 驱动模型？ 二、Platform 驱动模型的三大核心组件 1.Platform 总线（虚拟总线） 2.Platform 设备（platform_device） 3.Platform 驱动（platform_driver） 三、Plat…...

编程日记 2025/8/14 22:52:08

Linux：web服务nginx

一.Nginx简介 Nginx (engine x) 是一个高性能的Web和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服器。Nginx处理高并发能力是十分强大的，能经受高负载的考验。而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行…...

编程日记 2025/8/15 2:24:07

【“星睿O6”评测】Armv9.2a、KLEIDIAI及vulkan加速llamacpp部署本地AI

llamacpp 简介 llama.cpp 的主要目标是通过最小的设置，实现 LLM 推理，在各种硬件上（无论是本地还是云端）提供最先进的性能。纯 C/C实现，无任何依赖苹果 M1/M2 芯片（Apple silicon）优化&#…...

编程日记 2025/8/15 17:25:29

Advanced Installer 22.5打包windows 安装包

Advanced Installer 22.5打包windows 安装包 1、打开Advanced Installer 22.5打包工具，绿色免安装下载链接：https://download.csdn.net/download/LongtengGensSupreme/90778405 2、选择需要打包的文件 3、设置安装文件夹权限 4、安装参数设置 5、构建设…...

编程日记 2025/8/15 2:24:03

Qt界面设计时窗口中各控件布局及自适应方法

在进行Qt界面设计时，往往会因为控件的布局以及伴随窗口拉伸时控件没有做好自适应部署而导致界面效果大打折扣。这里简单介绍一下QtDesigner实现界面自适应布局，包括水平布局、垂直布局、栅格布局应用，确保界面元素随窗口变化自动调整。图1 如图所示，这是我们的设计目标…...

编程日记 2025/8/15 2:24:01

添加地形与自定义地形

在先前我们设置的地图中,放大后不难发现这是2d平面此时我们可以使用cesium自带的方法对图层进行修改 terrainProvider:Cesium.createWorldTerrainAsync(_) 修改后重新打开地图明显有了3d效果还可以自定义添加水纹效果 requestWaterMask: true, // 可选：请求水面掩…...

编程日记 2025/8/15 2:23:58

livedata使用，完整的livedata的Demo

完整 LiveData Demo（Java 实现） 下面是一个可直接运行的完整 LiveData 示例，包含 ViewModel、LiveData 的基本使用以及与 UI 的交互。项目结构 app/ ├── java/ │ ├── com.example.livedatademo/ │ │ ├── MainActivity.java │ …...

编程日记 2025/8/14 22:18:18

SpringBoot+Vue全栈的一个简单入门案例

目录开发环境 Github开源项目入门一：跑起别人的开源项目跑起前端Vue 跑起后端SpringBoot 运行效果入门二：将HTML模板转成Vue组件下载一个免费的HTML模板通过Trae将HTML转成Vue组件将生成Vue组件增加为Vue的一个路由节点运行Vue看看效…...

编程日记 2025/8/15 2:23:54

Nginx 性能调优与深度监测全攻略

目录 Nginx 性能调优与深度监测全攻略一、引言二、Nginx 核心性能调优策略 2.1 基础参数优化 2.1.1 worker 进程配置 2.1.2 事件驱动模型优化 2.2 缓存与资源优化 2.2.1 静态资源缓存 2.2.2 反向代理缓存 2.3 网络与连接优化 2.3.1 TCP 参数调整 2.3.2 Keep-Aliv…...

编程日记 2025/8/15 2:23:52

bad interpreter: No such file or directory

shell脚本加sqlite插入语句，内容如下： #!/bin/bash # 数据库文件路径 DB_FILE"/opt/ecu/db/Test.db" # 检查数据库文件所在目录是否存在，若不存在则创建 DB_DIR$(dirname "$DB_FILE") if [ ! -d "$DB_FILE" ]…...

编程日记 2025/8/15 2:23:50

记录 PyQt5不支持3.10及以上版本，pip install PyQt5时报错raise PyProjectOptionException(qmake 详细错误信息如下： $ pip install PyQt5 Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple Collecting pyqt5Using cached https://pypi…...

编程日记 2025/8/14 8:52:04

【风控】模型监控和异常处理

在风控模型的全生命周期中，模型监控与异常处理是保障模型持续、稳定、可靠运行的关键环节。本指南旨在提供系统化、可落地的监控指标、预警策略及异常处置流程，帮助团队快速定位、响应并修复线上模型问题，最大限度降低风险。 1.模型监控与预…...

编程日记 2025/8/15 2:23:46

高并发内存池（一）：项目简介+定长内存池的实现

目录一，项目介绍二，什么是内存池 1，池化技术 2，内存池 3，内存池主要解决的问题 4，malloc 三，实现一个定长内存池定长内存池的设计大致结构核心功能实现申请一块大小为T的内存释…...

编程日记 2025/8/15 2:23:44

STM32--TIM--函数

void TIM_ITConfig(TIM_TypeDef* TIMx, uint16_t TIM_IT, FunctionalState NewState) 用于使能或禁用指定的定时器中断。...

编程日记 2025/8/15 2:23:42

文生图（Text-to-Image）的发展

文章目录 1. 早期探索（2010-2015）：传统方法与初步尝试2. 文本条件GAN时代（2016-2019）3. 自回归与VQ-VAE时代（2019-2021）4. 扩散模型革命（2021-2022）(1) 扩散模型基础突破…...

编程日记 2025/8/14 4:58:57

vscode预览模式（点击文件时默认覆盖当前标签，标签名称显示为斜体，可通过双击该标签取消）覆盖标签、新窗打开

文章目录 VS Code 预览模式如何取消预览模式（即“固定”标签页）？预览模式有什么用？ VS Code 预览模式在 VS Code 中，当你单击文件浏览器（例如，资源管理器侧边栏）中的某个文件时&am…...

编程日记 2025/8/15 5:18:06

title: css内容省略 date: 2025-05-07 19:41:17 tags: css