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

css超出部分显示省略号

news 2026/5/24 2:22:30

 

目录

前言

一、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

RD-VLA：机器人动态思考的潜在空间迭代推理架构

1. 项目概述&#xff1a;为什么我们需要一个会“思考”的机器人模型&#xff1f;在机器人控制领域&#xff0c;我们一直梦想着能造出一个像人一样“聪明”的助手&#xff1a;让它去拿杯水&#xff0c;它能轻松完成&#xff1b;让它在一个杂乱无章的抽屉里找出并组装一个小零件&…...

编程新知 2026/5/24 2:19:57

【限时解密】Claude 3.5 Sonnet专属编程模式：仅开放给前500家企业的上下文感知补全协议

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Claude 3.5 Sonnet编程辅助的核心能力边界与适用场景 Claude 3.5 Sonnet 在编程辅助领域展现出显著的推理深度与上下文理解能力&#xff0c;但其本质仍是基于大规模语言模型的生成式系统&#xff0c;不具备实时…...

编程新知 2026/5/24 0:03:51

项目介绍 基于java+vue的跨境电商销售预测与可视化平台设计与实现（含模型描述及部分示例代码）专栏近期有大量优惠 还请多多点一下关注 加油 谢谢 你的鼓励是我前行的动力 谢谢支持 加油 谢谢

基于javavue的跨境电商销售预测与可视化平台设计与实现的详细项目实例 请注意此篇内容只是一个项目介绍 更多详细内容可直接联系博主本人 或者访问对应标题的完整博客或者文档下载页面&#xff08;含完整的程序&#xff0c;GUI设计和代码详解&#xff09; 跨境电商销售预测…...

编程新知 2026/5/23 23:53:15

中控考勤机MDB数据库逆向与安全审计实战

1. 为什么是中控考勤机MDB&#xff1f;——一个被低估的工业级数据入口你可能在工厂门禁旁、写字楼前台、甚至学校行政楼里见过那个灰黑色方盒子&#xff0c;屏幕不大&#xff0c;带个红外感应区&#xff0c;刷一下工卡&#xff0c;“滴”一声就完成打卡。它叫中控考勤机&#…...

编程新知 2026/5/23 22:45:49

工业AI落地：自定义数据集与交叉验证的动态选择策略

1. 这不是选择题&#xff0c;而是控制权与可信度的平衡术你手头刚攒够2000张标注好的工业缺陷图&#xff0c;模型在验证集上跑出了92.3%的准确率——但上线三天后&#xff0c;产线新批次的钢板表面反光角度变了&#xff0c;准确率直接掉到68%。或者&#xff0c;你用sklearn的St…...

编程新知 2026/5/23 22:37:41

当大模型遇见嵌入式MCU：RISC-V+TinyML+Agent状态机的超低功耗智能体设计（STM32H7实测待机功耗仅2.1mW）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;AI Agent边缘计算应用 AI Agent在边缘计算场景中正从“云端智能”转向“端侧自治”&#xff0c;通过轻量化模型、实时推理与本地决策能力&#xff0c;显著降低延迟、带宽依赖与数据隐私风险。典型应用包括工业…...

编程新知 2026/5/23 21:46:52

2026年，探寻靠谱体育器材的终极指南

在追求健康与活力的时代&#xff0c;体育器材成为了我们运动生活中的重要伙伴。但面对市场上琳琅满目的品牌和产品&#xff0c;如何选择靠谱的体育器材成为了许多人的难题。今天&#xff0c;让我们一同探寻 2026 年靠谱体育器材的终极指南。一、品质与口碑沧州九牌体育用品制造…...

编程新知 2026/5/23 21:14:47

GEO服务商技术评估的四维量化框架：以杭州文澜天下科技为例

评估维度如下。评估维度一&#xff1a;技术自研深度&#xff08;权重30%&#xff09;行业数据显示&#xff0c;当前市场上超千家宣称提供GEO服务的机构中&#xff0c;仅19%拥有完整的自主技术研发团队&#xff0c;超73%的品牌选错服务商&#xff0c;导致二次重构投入成本达到首…...

编程新知 2026/5/23 21:08:22

Codex CLI 接 Gemini 3.5 Flash 实测：代码生成、推理速度、价格三维度横评（2026）

上周 Google 发了 Gemini 3.5 Flash&#xff0c;我当天晚上就拿 Codex CLI 接上跑了几个项目里的真实任务。原因很简单——我们团队最近 token 开销涨得太快&#xff0c;老板让我找个"又快又便宜还不太拉胯"的模型顶日常编码场景。Claude Sonnet 4.6 质量没话说但贵&…...

编程新知 2026/5/23 21:06:19

龙芯3A5000工业主板实战：从硬件部署到软件生态的国产化替代指南

1. 项目概述&#xff1a;一颗“中国芯”的工业级落地 最近&#xff0c;圈子里关于国产自主平台的消息又热闹了起来。这次的主角&#xff0c;是集特智能新推出的一款工业主板&#xff0c;核心搭载了龙芯3A5000处理器和7A2000桥片。对于长期深耕工业控制、边缘计算、网络安全这些…...

编程新知 2026/5/23 20:56:09