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

css超出部分显示省略号

news 2026/4/1 6:16:00

 

目录

前言

一、CSS单行实现

二、CSS多行实现（CSS3出的，兼容性需要注意）

三、微信小程序超过2行出现省略号实现

四、JavaScript脚本实现

前言

CSS文本溢出就显示省略号，就是在样式中指定了盒子的宽度与高度,有可能出现某些内容在盒中容纳不下的情况，我们需要文本溢出就显示省略号。实现这个效果有两种方案啦，一种是CSS实现，还有一种是万能的JavaScript脚本实现啦，记录一下，方便大家Ctrl+V和Ctrl+C：

一、CSS单行实现

white-space：设置不换行，用来设置如何处理元素中的空白。

overflow：隐藏超出部分，定义当一个元素的内容太大而无法适应时，块级格式化上下文如何处理。它是overflow-x和overflow-y的简写属性。

text-overflow：添加省略号，确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'）或显示一个自定义字符串。

注意：必须有固定宽度才会出现效果。

<style>
.wrap{width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
</style>
<body><p class="wrap">什么是溢出?如果在样式中指定了盒子的宽度与高度</p>
</body>

 

二、CSS多行实现（CSS3出的，兼容性需要注意）

-webkit-line-clamp：限制在一个块元素显示的文本的行数，可以把块容器中的内容限制为指定的行数。它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果。

-webkit-box-orient：用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的，使用时需要注意兼容性。

<style>
.wrap{width: 100px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 这里是超出几行省略 */overflow: hidden;
}
</style>
<body><p class="wrap">
什么是溢出?如果在样式中指定了盒子的宽度与高度
什么是溢出?如果在样式中指定了盒子的宽度与高度</p>
</body>

 三、微信小程序超过2行出现省略号实现

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

四、JavaScript脚本实现

/*** 超出部分显示···* num 控制显示字符长度，com控制显示dom元素*/function mitulineHide(num,com){let contain = document.querySelector(com);console.log(contain);let maxSize = num;let txt = contain.innerHTML;if(txt.length > num){console.log(1)txt = txt.substring(0,num-1)+"...";contain.innerHTML = txt;}else{return;}}mitulineHide(50,"p");

 欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

 我的博客原文：CSS超出省略。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

相关文章：

css超出部分显示省略号

目录 前言 一、CSS单行实现 二、CSS多行实现&#xff08;CSS3出的&#xff0c;兼容性需要注意&#xff09; 三、微信小程序超过2行出现省略号实现 四、JavaScript脚本实现 前言 CSS文本溢出就显示省略号&#xff0c;就是在样式中指定了盒子的宽度与高度,有可能出现某些内…...

编程日记 2024/3/15 15:24:40

python-0001-安装虚拟环境

版本 软件版本python3.9.10django2.2.5sqlite33.45.1pycharm2023.3.4 安装python3.9.10 升级sqlite3 下载地址&#xff1a;https://download.csdn.net/download/qq_41833259/88944701 升级命令&#xff1a; tar -zxvf sqlite-autoconf-3399999.tar.gz cd sqlite-autoconf-…...

编程日记 2024/3/15 15:22:38

Python爬虫：原理与实战

引言 在当今的信息时代&#xff0c;互联网上的数据如同浩瀚的海洋&#xff0c;充满了无尽的宝藏。Python爬虫作为一种高效的数据抓取工具&#xff0c;能够帮助我们轻松地获取这些数据&#xff0c;并进行后续的分析和处理。本文将深入探讨Python爬虫的原理&#xff0c;并结合实战…...

编程日记 2024/3/15 15:21:37

C# danbooru Stable Diffusion 提示词反推 Onnx Demo

目录 说明 效果 模型信息 项目 代码 下载 C# danbooru Stable Diffusion 提示词反推 Onnx Demo 说明 模型下载地址&#xff1a;https://huggingface.co/deepghs/ml-danbooru-onnx 效果 模型信息 Model Properties ------------------------- ----------------------…...

编程日记 2024/3/15 15:19:35

Windows系统搭建Cloudreve结合内网穿透打造可公网访问的私有云盘

目录 ⛳️推荐 1、前言 2、本地网站搭建 2.1 环境使用 2.2 支持组件选择 2.3 网页安装 2.4 测试和使用 2.5 问题解决 3、本地网页发布 3.1 cpolar云端设置 3.2 cpolar本地设置 4、公网访问测试 5、结语 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff…...

编程日记 2024/3/15 15:17:32

upload-labs 0.1 靶机详解

下载地址https://github.com/c0ny1/upload-labs/releases Pass-01 他让我们上传一张图片&#xff0c;我们先尝试上传一个php文件 发现他只允许上传图片格式的文件&#xff0c;我们来看看源码 我们可以看到它使用js来限制我们可以上传的内容 但是我们的浏览器是可以关闭js功能的…...

编程日记 2024/3/15 15:16:31

react 综合题-旧版

一、组件基础 1. React 事件机制 javascript 复制代码<div onClick{this.handleClick.bind(this)}>点我</div> React并不是将click事件绑定到了div的真实DOM上&#xff0c;而是在document处监听了所有的事件&#xff0c;当事件发生并且冒泡到document处的时候&a…...

编程日记 2024/3/15 15:07:21

基于ElasticSearch存储海量AIS数据：AIS数据索引机制篇

文章目录 引言I 预备知识1.1 索引结构1.2 AIS信息项II AIS数据索引2.1 AIS数据静态数据索引2.2 AIS数据动态信息索引2.3 引入静态信息的AIS数据轨迹信息索引引言 AIS数据信息根据其不同更新频率可分为静态和动态信息。索引结构设计包含了静态、动态和轨迹信息索引。同时，为了…...

编程日记 2024/3/15 15:05:17

IDEA中返回上一步和下一步快捷键失效【Ctrl+Alt+左箭头】

原因与解决方法 快捷键失效的缘故&#xff0c;和其它软件的快捷键冲突。方法:改变快捷键。如果不知道哪个软件影响的&#xff0c;一个一个关闭软件&#xff0c;然后再去IDEA中尝试快捷键是否生效。 【提示&#xff1a;我的是QQ音乐软件打开影响的】...

编程日记 2024/3/15 15:04:15

Hubspot 2023年推荐使用的11个AI视频生成器

视频是任何营销活动不可或缺的一部分&#xff1b;然而&#xff0c;如果你不懂编辑或时间紧迫&#xff0c;它们可能会很乏味&#xff0c;很难创建。一只手从电脑里伸出来&#xff0c;拳头碰到另一只手&#xff1b;代表AI视频生成器。 幸运的是&#xff0c;你可以利用许多人工智能…...

编程日记 2024/3/15 15:02:13

Python 导入Excel三维坐标数据 生成三维曲面地形图(体) 5-2、线条平滑曲面且可通过面观察柱体变化(二)

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata fro…...

编程日记 2024/3/15 15:01:12

[2024年]-flink面试真题(四)

(上海) Flink与Spark有什么主要区别&#xff1f;(上海) 关于Flink的流处理和批处理&#xff0c;你了解多少&#xff1f;(上海) 你能解释一下Flink的架构吗&#xff1f;(上海) Flink是如何处理事件时间&#xff08;Event Time&#xff09;和处理时间&#xff08;Processing Time…...

编程日记 2024/3/15 15:00:11

基于SpringBoot+Druid实现多数据源：原生注解式

前言 本博客姊妹篇 基于SpringBootDruid实现多数据源&#xff1a;原生注解式基于SpringBootDruid实现多数据源&#xff1a;注解编程式基于SpringBootDruid实现多数据源&#xff1a;baomidou多数据源 一、功能描述 配置方式&#xff1a;配置文件中实现多数据源&#xff0c;非…...

编程日记 2024/3/15 14:59:10

AJAX 03 XMLHttpRequest、Promise、封装简易版 axios

AJAX 学习 AJAX 3 原理01 XMLHttpRequest① XHR 定义② XHR & axios 关系③ 使用 XHR④ XHR查询参数案例&#xff1a;地区查询&#xff08;URLSearchParams&#xff09;⑤ XHR数据提交 POST 02 PromisePromise 使用Promise - 三种状态案例&#xff1a;使用Promise XHR 获取…...

编程日记 2024/3/15 14:56:05

如何将办公资料文件生成二维码？扫码可看详情

日常办公的时候&#xff0c;经常会需要应用二维码来向同事或者客户发送和展示一些资料。比如包含企业介绍和产品介绍的资料、一些操作流程的资料、产品展示宣传视频、活动安排详情、比赛流程、会议资料… 这些都能通过一个文件二维码来展示。 文件二维码支持将PDF文件生成二维…...

编程日记 2024/3/15 14:49:59

【Streamlit学习笔记】实现包含多个sheet的excel文件下载

1、什么是Streamlit Streamlit是一个免费的开源框架&#xff0c;用于快速构建和共享漂亮的机器学习和数据科学Web应用程序&#xff0c;官网链接 Streamlit Streamlit API链接 API reference 实际项目中遇到的问题&#xff1a;包含多个sheet的excel文件下载&#xff0c;下面将给…...

编程日记 2024/3/15 14:47:57

[Redis]——主从同步原理(全量同步、增量同步)

目录 Redis集群&#xff1a; 主从同步原理&#xff1a; replid和offset: 全量同步和增量同步&#xff1a; repl_baklog文件&#xff1a; 主从集群的优化&#xff1a; Redis集群&#xff1a; 部署多台Redis我们称之为Redis集群&#xff0c;他有一个主节点(负责写操作)&…...

编程日记 2024/3/15 14:46:55

Buildroot 之二 详解构建架构、流程、external tree、示例

构建系统 Buildroot 中的构建系统使用的是从 Linux Kernel（4.17-rc2） 中移植的 Kconfig（配置） + Makefile & Kbuild（编译）这套构建系统，移植后的源码位于 support/kconfig/ 目录下。Buildroot 本身是一个构建系统，与直接编译源码不同，因此，它对这套系统进行了比较…...

编程日记 2024/3/15 14:44:52

牛客小白月赛61-C-小喵觅食

很经典的bfs,就是从猫咪和MM的坐标开始bfs搜索 不过这题有些小细节需要注意 1.认真审题,注意,猫一旦闻到小鱼干的味道,开始动,此时MM就不动了,一开始没仔细审题,很不好的习惯 2.注意移动的条件,vis,不是墙,距离是MM的移动距离范围内 3.这个猫咪的r2是闻味道的r2,不是移动距…...

编程日记 2024/3/15 14:42:50

200 名专家编写报告：AI 发展可能对人类构成「灭绝级威胁」

3 月 14 日消息&#xff0c;美国国务院委托编写了一份新报告&#xff0c;警告 AI 正呈指数级发展&#xff0c;可能会对人类构成「灭绝级威胁」。 这份报告全称为《提高先进人工智能安全保障的行动计划》&#xff0c;要求美国政府必须迅速、果断地采取行动&#xff0c;以避免 A…...

编程日记 2024/3/15 14:40:47

别只盯着时钟了！用Vivado的Set_Data_Check搞定FPGA里两个数据信号的时序检查（附工程源码）

FPGA时序约束进阶&#xff1a;用Set_Data_Check精准控制数据信号时序关系 在FPGA设计中&#xff0c;时序约束是确保电路功能正确性的关键环节。大多数工程师对时钟与数据信号之间的setup/hold约束已经驾轻就熟&#xff0c;但当面对两个数据信号之间的时序关系时&#xff0c;却常…...

编程新知 2026/4/1 6:07:22

告别轮询！用STM32F407的USART3+DMA+空闲中断实现高效串口数据接收

STM32F407高效串口通信&#xff1a;USART3DMA空闲中断实战指南 在嵌入式开发中&#xff0c;串口通信是最基础也最常用的外设之一。传统的中断接收方式虽然简单&#xff0c;但在高速或大数据量传输时&#xff0c;频繁的中断响应会显著增加CPU负担&#xff0c;甚至导致数据丢失。…...

编程新知 2026/4/1 5:39:02

Self Service Password与LDAP集成实战：从部署到问题排查

1. Self Service Password与LDAP集成概述 自助密码重置功能已经成为企业IT基础设施中不可或缺的一部分。想象一下&#xff0c;当员工在深夜加班时忘记密码&#xff0c;又找不到IT支持人员&#xff0c;这种场景下的自助解决方案就显得尤为重要。Self Service Password&#xff0…...

编程新知 2026/4/1 5:22:56

Conda环境管理全攻略：从零配置到VSCode无缝衔接（附清华镜像加速）

Conda环境管理全攻略&#xff1a;从零配置到VSCode无缝衔接&#xff08;附清华镜像加速&#xff09; 在数据科学和机器学习领域&#xff0c;Python环境的配置与管理往往是项目开始的第一步&#xff0c;也是最容易让初学者感到困惑的环节。不同项目可能需要不同版本的Python解释…...

编程新知 2026/4/1 5:04:47

使用ZLMRTCClient.j实现webRtc流播放

1. 核心播放器组件封装 (WebRTCPlayer.vue)为了在项目中复用播放逻辑&#xff0c;我们首先封装一个 WebRTCPlayer 组件。该组件主要负责&#xff1a;初始化播放器实例&#xff1a;配置 ZLMRTCClient.Endpoint。处理自动播放&#xff1a;解决浏览器禁止带音频自动播放的问题。生…...

编程新知 2026/4/1 4:28:01

Realistic Vision V5.1 提示词工程入门：C语言基础思维在Prompt编写中的应用

Realistic Vision V5.1 提示词工程入门&#xff1a;C语言基础思维在Prompt编写中的应用 如果你有C语言的编程经验&#xff0c;现在想玩转AI图像生成&#xff0c;特别是像Realistic Vision V5.1这样的写实风格模型&#xff0c;那这篇文章就是为你准备的。很多人觉得写提示词&am…...

编程新知 2026/4/1 4:25:59

cv2.findContours()错误的解决办法ValueError: not enough values to unpack (expected 3, got 2)

方法一&#xff1a;直接去掉一个返回值就即可。 方法二&#xff1a;把OpenCV 安装3.X的版本 具体原因 2、解析差异&#xff1a; OpenCV2和OpenCV4中&#xff1a; findContours这个轮廓提取函数会返回两个值&#xff1a;①轮廓的点集(contours)②各层轮廓的索引(hierarchy) 返回…...

编程新知 2026/4/1 2:18:02

如何在旧款Mac上安装最新macOS：OpenCore Legacy Patcher完整指南

如何在旧款Mac上安装最新macOS&#xff1a;OpenCore Legacy Patcher完整指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为苹果官方停止支持的老旧Ma…...

编程新知 2026/4/1 2:12:00

优化算法避坑指南：为什么BFGS比DFP更常用？从数值稳定性到工程实践详解

优化算法避坑指南&#xff1a;为什么BFGS比DFP更常用&#xff1f;从数值稳定性到工程实践详解 在机器学习模型训练和工程优化问题中&#xff0c;我们常常需要求解无约束优化问题。当目标函数的海森矩阵难以计算或维度较高时&#xff0c;拟牛顿法因其出色的平衡性成为首选。但面…...

编程新知 2026/4/1 0:36:06

Wan2.2-I2V-A14B部署教程：NVIDIA MPS多进程服务共享GPU资源方案

Wan2.2-I2V-A14B部署教程&#xff1a;NVIDIA MPS多进程服务共享GPU资源方案 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文本生成视频任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像最大的特点是内置了完整的运行环境和模…...

编程新知 2026/4/1 0:32:05