css实现三行,溢出显示省略号(后有js实现逻辑)

css实现代码:

.text-container {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}

解释:
1.-webkit-box 和 -webkit-box-orient 属性将容器元素设置为一个垂直方向的弹性盒子,并指定了最多显示三行文本;
2.overflow: hidden 来隐藏超出容器高度的文本;
3.text-overflow: ellipsis 来在文本溢出时显示省略号;

注意,
-webkit-line-clamp 是一个非标准属性,只在 WebKit 内核的浏览器(如 Chrome 和 Safari)中生效。如果需要兼容其他浏览器,可以考虑使用 JavaScript 或其他方法来实现类似的效果。

javascript实现代码:

<div id="textContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum turpis nec orci aliquam, et luctus nisi feugiat.
</div>
var textContainer = document.getElementById("textContainer");
var lineHeight = parseInt(window.getComputedStyle(textContainer).lineHeight);
var maxHeight = lineHeight * 3;if (textContainer.offsetHeight > maxHeight) {while (textContainer.offsetHeight > maxHeight) {textContainer.textContent = textContainer.textContent.replace(/\W*\s(\S)*$/, '...');}
}

解释:
1.通过 document.getElementById() 方法获取到 id 为 “textContainer” 的容器元素;
2.window.getComputedStyle() 方法获取到容器元素的行高(line-height)属性,并将其转换为整数;
3.计算出最大高度(maxHeight),即三行文本的高度;
4.检查容器元素的实际高度是否超过最大高度。如果超过,则进入循环;
在循环中,我们使用正则表达式将容器元素的文本内容逐渐缩短,直到其高度不再超过最大高度为止。我们使用正则表达式\W*\s(\S)*$来匹配最后一个单词之后的所有字符,并将其替换为省略号。
最终,当容器元素的文本内容被缩短到不再溢出三行时,循环结束。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/163400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

需求调研计划及用户需求调研单

1.目的 2.概述 3.需求调研计划 3.1调研目的 3.2调研范围 3.2.1.调研的职能范围 3.2.2.调研的业务范围 3.2.3.调研的地点范围 3.3调研方式 3.4调研阶段 3.5具体时间安排 软件开发全文档获取&#xff1a;点我获取 1、需求调研计划 2、用户需求调研单 项目名称 客…

C++ auto的作用

auto的作用 保护变量的值不被修改&#xff0c;防止意外的错误操作&#xff1b;声明函数参数为常量引用&#xff0c;以避免函数修改参数的值&#xff1b;声明类的成员函数为常量成员函数&#xff0c;以确保函数不修改对象的状态。 1 const关键字用于声明一个常量&#xff0c;…

【EI会议投稿】第九届电子技术和信息科学国际学术会议(ICETIS 2024)

第九届电子技术和信息科学国际学术会议&#xff08;ICETIS 2024&#xff09; The 9th International Conference on Electronic Technology andInformation Science&#xff08;ICETIS 2024&#xff09; ICETIS会议始于2016年&#xff0c;先后吸引众多来自国内外高等院校、科…

2023亚太杯数学建模竞赛C题新能源电动汽车数据分析与代码讲解

C题论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解、问题4模型的建立和求解、问题5模型的建立和求解&#xff09;、模型的评价等等&#xff0c; 视频讲解如下&…

组件库篇 | EUI | 按钮

组件库篇 | EUI | 按钮 前言 从本章开始,我将会一一演示所有组件所有函数的调用代码,以方便读者掌握组件的具体用法。但这并不意味着在实际使用中要用到所有的函数,请读者按需取用。 基本介绍 EUI提供了三种类型的按钮,如下: 常规按钮 Button文字按钮 TextButton图标按钮…

《洛谷深入浅出基础篇》P1113 杂物——DAG

上链接&#xff1a;P1113 杂务 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P1113 上题干&#xff1a; 题目描述 John 的农场在给奶牛挤奶前有很多杂务要完成&#xff0c;每一项杂务都需要一定的时间来完成它。比如&#xff1a;他们要将奶牛…

编写SQL语句,场景:从一张表中查询某字段是逗号分隔的集合值,需要遍历集合内每个值,将其作为条件去查询另一张表,最终返回列表

目录 场景编写SQL分页获取该开票单号下的所有订单列表使用子查询和 in 字句使用 find_in_set 场景 从一张表中查询某字段是逗号分隔的集合值&#xff0c;需要遍历集合内每个值&#xff0c;将其作为条件去查询另一张表&#xff0c;最终返回列表 编写SQL 分页获取该开票单号下…

羊大师详解羊奶如何帮助控制血压

羊大师详解羊奶如何帮助控制血压 羊奶是一种珍贵的天然饮品&#xff0c;不仅具有丰富的营养成分&#xff0c;还被证实对血压具有调控作用。很多人在了解到羊奶的功效后&#xff0c;都对其与血压之间的关系产生了浓厚的兴趣。接下来&#xff0c;小编羊大师将为大家详细介绍羊奶…

Linux基本命令与系统题目

1.linux 2.6.* 内核默认支持的文件系统有哪些&#xff1f;[多选] A.ext3 B.ext2 C.ext4 D.xfs E.ufs 2.linux查看cpu占用的命令是什么&#xff1f; A.top B.netstat C.free D.df 3.在Linux系统中, 为找到文件try_grep含有以a字母为行开头的内容, 可以使用命令&…

算法复杂度分析

文章目录 有数据范围反推算法复杂度以及算法内容一般方法递归 有数据范围反推算法复杂度以及算法内容 c一秒可以算 1 0 7 10^7 107~ 1 0 8 10^8 108次 一般方法 看循环 有几层循环就可以初步分析O( n i n^i ni) 双指针算法除外O(n) 递归 公式法 根据公式的形式&#xff0…

ARM 汇编基础

我们在学习 STM32 的时候几乎没有用到过汇编&#xff0c;可能在学习 UCOS 、 FreeRTOS 等 RTOS 类操作系统移植的时候可能会接触到一点汇编。但是我们在进行嵌入式 Linux 开发的时候是绝 对要掌握基本的 ARM 汇编&#xff0c;因为 Cortex-A 芯片一上电 SP 指针还…

关于前端上传

类似于 上面的传参form-data形式&#xff0c;第一个参数为上传的文件&#xff0c;第二个参数为json格式

一篇搞定Java注解

参考&#xff1a;https://blog.csdn.net/yeahPeng11/article/details/120394276 https://blog.csdn.net/yeahPeng11/article/details/120330630 https://www.cnblogs.com/CF1314/p/16580232.html 通过现有注解&#xff0c;明白注解是什么东东。 在 SpringBoot中&#xff0c;我…

G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器

G320E 低噪声电荷泵DC/DC转换器 产品概述&#xff1a; G320E是一种低荣声、固定频率的电荷泵型DC/DC转换器&#xff0c;在输入电压范围在2.7V到5.0V的情况下&#xff0c;该器件可以产生5V的输出电压&#xff0c;最大输出电流达到300mA.G320E外部元件少&#xff0c;非常适合于…

IP定位揭秘:如何揪出SEM、百度竞价恶意点击

在当今的数字营销领域&#xff0c;搜索引擎营销&#xff08;SEM&#xff09;和百度竞价成为了企业推广的重要手段。然而&#xff0c;随着这些渠道的普及&#xff0c;恶意点击现象也日益严重。恶意点击主要来自竞争对手&#xff0c;或是竞价服务的提供商&#xff0c;他们通过点击…

亚信安慧AntDB MTK数据同步工具之数据稽核

数据稽核是一种用于确保表数据准确性和一致性的重要方法&#xff0c;它涉及到检查数据的完整性、一致性、有效性和合法性&#xff0c;以及与预期规范的匹配程度等多个方面。随着大数据时代的到来&#xff0c;通过有效的数据稽核&#xff0c;组织可以提高决策的准确性和效率&…

浅谈安科瑞直流电表在荷兰光伏充电桩系统中的应用

摘要&#xff1a;本文介绍了安科瑞直流电表在荷兰光伏充电桩系统中的应用。主要用于充电桩的电流电压电能的计量。 Abstract: This article introduces the application of Acrel DC meters in PV charging pile system in Netherlands.The device is measuring current,volt…

Modbus-RTU协议讲解与实战

1、背景 工作需要,需要使用Modbus-RTU实现RS485通信,于是简单学习并实践了一下。 2、参考资料 一文看懂Modbus协议 3、协议说明 3.1、协议类型 当前设备采用Modbus-RTU协议,采用CRC-16_Modbus校验算法,数据链路层使用用标准串口协议,物理层采用RS485进行数据传输。 …

python变量、常量、数据类型

一、变量 变量是存储在内存中的值&#xff0c;这就意味着在创建变量时会在内存中开辟一个空间。 基于变量的数据类型&#xff0c;解释器会分配指定内存&#xff0c;并决定什么数据可以被存储在内存中。 因此&#xff0c;变量可以指定不同的数据类型&#xff0c;这些变量可以…

开源Flutter on Desktop项目-极扩安卓开发者工具

极扩-安卓开发者工具 他能干嘛 这个Flutter on Desktop桌面项目可以辅助你开发APP&#xff0c;支持分析一些运行数据以及操作APK安装等功能&#xff0c;甚至我还加入了Window安卓子系统的功能。 在它的帮助下&#xff0c;你可以快速查看当前正在运行的Activity&#xff0c;给你…