css超出部分显示省略号

目录
前言
一、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多行实现(CSS3出的,兼容性需要注意) 三、微信小程序超过2行出现省略号实现 四、JavaScript脚本实现 前言 CSS文本溢出就显示省略号,就是在样式中指定了盒子的宽度与高度,有可能出现某些内…...
python-0001-安装虚拟环境
版本 软件版本python3.9.10django2.2.5sqlite33.45.1pycharm2023.3.4 安装python3.9.10 升级sqlite3 下载地址:https://download.csdn.net/download/qq_41833259/88944701 升级命令: tar -zxvf sqlite-autoconf-3399999.tar.gz cd sqlite-autoconf-…...
Python爬虫:原理与实战
引言 在当今的信息时代,互联网上的数据如同浩瀚的海洋,充满了无尽的宝藏。Python爬虫作为一种高效的数据抓取工具,能够帮助我们轻松地获取这些数据,并进行后续的分析和处理。本文将深入探讨Python爬虫的原理,并结合实战…...
C# danbooru Stable Diffusion 提示词反推 Onnx Demo
目录 说明 效果 模型信息 项目 代码 下载 C# danbooru Stable Diffusion 提示词反推 Onnx Demo 说明 模型下载地址:https://huggingface.co/deepghs/ml-danbooru-onnx 效果 模型信息 Model Properties ------------------------- ----------------------…...
Windows系统搭建Cloudreve结合内网穿透打造可公网访问的私有云盘
目录 ⛳️推荐 1、前言 2、本地网站搭建 2.1 环境使用 2.2 支持组件选择 2.3 网页安装 2.4 测试和使用 2.5 问题解决 3、本地网页发布 3.1 cpolar云端设置 3.2 cpolar本地设置 4、公网访问测试 5、结语 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站ÿ…...
upload-labs 0.1 靶机详解
下载地址https://github.com/c0ny1/upload-labs/releases Pass-01 他让我们上传一张图片,我们先尝试上传一个php文件 发现他只允许上传图片格式的文件,我们来看看源码 我们可以看到它使用js来限制我们可以上传的内容 但是我们的浏览器是可以关闭js功能的…...
react 综合题-旧版
一、组件基础 1. React 事件机制 javascript 复制代码<div onClick{this.handleClick.bind(this)}>点我</div> React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候&a…...
基于ElasticSearch存储海量AIS数据:AIS数据索引机制篇
文章目录 引言I 预备知识1.1 索引结构1.2 AIS信息项II AIS数据索引2.1 AIS数据静态数据索引2.2 AIS数据动态信息索引2.3 引入静态信息的AIS数据轨迹信息索引引言 AIS数据信息根据其不同更新频率可分为静态和动态信息。索引结构设计包含了静态、动态和轨迹信息索引。同时,为了…...
IDEA中返回上一步和下一步快捷键失效【Ctrl+Alt+左箭头】
原因与解决方法 快捷键失效的缘故,和其它软件的快捷键冲突。方法:改变快捷键。如果不知道哪个软件影响的,一个一个关闭软件,然后再去IDEA中尝试快捷键是否生效。 【提示:我的是QQ音乐软件打开影响的】...
Hubspot 2023年推荐使用的11个AI视频生成器
视频是任何营销活动不可或缺的一部分;然而,如果你不懂编辑或时间紧迫,它们可能会很乏味,很难创建。一只手从电脑里伸出来,拳头碰到另一只手;代表AI视频生成器。 幸运的是,你可以利用许多人工智能…...
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年]-flink面试真题(四)
(上海) Flink与Spark有什么主要区别?(上海) 关于Flink的流处理和批处理,你了解多少?(上海) 你能解释一下Flink的架构吗?(上海) Flink是如何处理事件时间(Event Time)和处理时间(Processing Time…...
基于SpringBoot+Druid实现多数据源:原生注解式
前言 本博客姊妹篇 基于SpringBootDruid实现多数据源:原生注解式基于SpringBootDruid实现多数据源:注解编程式基于SpringBootDruid实现多数据源:baomidou多数据源 一、功能描述 配置方式:配置文件中实现多数据源,非…...
AJAX 03 XMLHttpRequest、Promise、封装简易版 axios
AJAX 学习 AJAX 3 原理01 XMLHttpRequest① XHR 定义② XHR & axios 关系③ 使用 XHR④ XHR查询参数案例:地区查询(URLSearchParams)⑤ XHR数据提交 POST 02 PromisePromise 使用Promise - 三种状态案例:使用Promise XHR 获取…...
如何将办公资料文件生成二维码?扫码可看详情
日常办公的时候,经常会需要应用二维码来向同事或者客户发送和展示一些资料。比如包含企业介绍和产品介绍的资料、一些操作流程的资料、产品展示宣传视频、活动安排详情、比赛流程、会议资料… 这些都能通过一个文件二维码来展示。 文件二维码支持将PDF文件生成二维…...
【Streamlit学习笔记】实现包含多个sheet的excel文件下载
1、什么是Streamlit Streamlit是一个免费的开源框架,用于快速构建和共享漂亮的机器学习和数据科学Web应用程序,官网链接 Streamlit Streamlit API链接 API reference 实际项目中遇到的问题:包含多个sheet的excel文件下载,下面将给…...
[Redis]——主从同步原理(全量同步、增量同步)
目录 Redis集群: 主从同步原理: replid和offset: 全量同步和增量同步: repl_baklog文件: 主从集群的优化: Redis集群: 部署多台Redis我们称之为Redis集群,他有一个主节点(负责写操作)&…...
Buildroot 之二 详解构建架构、流程、external tree、示例
构建系统 Buildroot 中的构建系统使用的是从 Linux Kernel(4.17-rc2) 中移植的 Kconfig(配置) + Makefile & Kbuild(编译)这套构建系统,移植后的源码位于 support/kconfig/ 目录下。Buildroot 本身是一个构建系统,与直接编译源码不同,因此,它对这套系统进行了比较…...
牛客小白月赛61-C-小喵觅食
很经典的bfs,就是从猫咪和MM的坐标开始bfs搜索 不过这题有些小细节需要注意 1.认真审题,注意,猫一旦闻到小鱼干的味道,开始动,此时MM就不动了,一开始没仔细审题,很不好的习惯 2.注意移动的条件,vis,不是墙,距离是MM的移动距离范围内 3.这个猫咪的r2是闻味道的r2,不是移动距…...
200 名专家编写报告:AI 发展可能对人类构成「灭绝级威胁」
3 月 14 日消息,美国国务院委托编写了一份新报告,警告 AI 正呈指数级发展,可能会对人类构成「灭绝级威胁」。 这份报告全称为《提高先进人工智能安全保障的行动计划》,要求美国政府必须迅速、果断地采取行动,以避免 A…...
别只盯着时钟了!用Vivado的Set_Data_Check搞定FPGA里两个数据信号的时序检查(附工程源码)
FPGA时序约束进阶:用Set_Data_Check精准控制数据信号时序关系 在FPGA设计中,时序约束是确保电路功能正确性的关键环节。大多数工程师对时钟与数据信号之间的setup/hold约束已经驾轻就熟,但当面对两个数据信号之间的时序关系时,却常…...
告别轮询!用STM32F407的USART3+DMA+空闲中断实现高效串口数据接收
STM32F407高效串口通信:USART3DMA空闲中断实战指南 在嵌入式开发中,串口通信是最基础也最常用的外设之一。传统的中断接收方式虽然简单,但在高速或大数据量传输时,频繁的中断响应会显著增加CPU负担,甚至导致数据丢失。…...
Self Service Password与LDAP集成实战:从部署到问题排查
1. Self Service Password与LDAP集成概述 自助密码重置功能已经成为企业IT基础设施中不可或缺的一部分。想象一下,当员工在深夜加班时忘记密码,又找不到IT支持人员,这种场景下的自助解决方案就显得尤为重要。Self Service Password࿰…...
Conda环境管理全攻略:从零配置到VSCode无缝衔接(附清华镜像加速)
Conda环境管理全攻略:从零配置到VSCode无缝衔接(附清华镜像加速) 在数据科学和机器学习领域,Python环境的配置与管理往往是项目开始的第一步,也是最容易让初学者感到困惑的环节。不同项目可能需要不同版本的Python解释…...
使用ZLMRTCClient.j实现webRtc流播放
1. 核心播放器组件封装 (WebRTCPlayer.vue)为了在项目中复用播放逻辑,我们首先封装一个 WebRTCPlayer 组件。该组件主要负责:初始化播放器实例:配置 ZLMRTCClient.Endpoint。处理自动播放:解决浏览器禁止带音频自动播放的问题。生…...
Realistic Vision V5.1 提示词工程入门:C语言基础思维在Prompt编写中的应用
Realistic Vision V5.1 提示词工程入门:C语言基础思维在Prompt编写中的应用 如果你有C语言的编程经验,现在想玩转AI图像生成,特别是像Realistic Vision V5.1这样的写实风格模型,那这篇文章就是为你准备的。很多人觉得写提示词&am…...
cv2.findContours()错误的解决办法ValueError: not enough values to unpack (expected 3, got 2)
方法一:直接去掉一个返回值就即可。 方法二:把OpenCV 安装3.X的版本 具体原因 2、解析差异: OpenCV2和OpenCV4中: findContours这个轮廓提取函数会返回两个值:①轮廓的点集(contours)②各层轮廓的索引(hierarchy) 返回…...
如何在旧款Mac上安装最新macOS:OpenCore Legacy Patcher完整指南
如何在旧款Mac上安装最新macOS:OpenCore Legacy Patcher完整指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为苹果官方停止支持的老旧Ma…...
优化算法避坑指南:为什么BFGS比DFP更常用?从数值稳定性到工程实践详解
优化算法避坑指南:为什么BFGS比DFP更常用?从数值稳定性到工程实践详解 在机器学习模型训练和工程优化问题中,我们常常需要求解无约束优化问题。当目标函数的海森矩阵难以计算或维度较高时,拟牛顿法因其出色的平衡性成为首选。但面…...
Wan2.2-I2V-A14B部署教程:NVIDIA MPS多进程服务共享GPU资源方案
Wan2.2-I2V-A14B部署教程:NVIDIA MPS多进程服务共享GPU资源方案 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文本生成视频任务优化的私有部署镜像,特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像最大的特点是内置了完整的运行环境和模…...
