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

css超出部分显示省略号

news 2025/7/10 20:31:40

前言

一、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-安装虚拟环境

Python爬虫：原理与实战

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

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

upload-labs 0.1 靶机详解

react 综合题-旧版

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

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

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

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

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

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

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

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

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

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

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

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

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

生成xcframework

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

基于Flask实现的医疗保险欺诈识别监测模型

汇编常见指令

Web 架构之 CDN 加速原理与落地实践

力扣-35.搜索插入位置

如何在网页里填写 PDF 表格？

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

STM32HAL库USART源代码解析及应用