JS如何判断文字是否溢出(被ellipsis)?

2023-10-10 19:04

本文主要是介绍JS如何判断文字是否溢出(被ellipsis)?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如果想要文本超出宽度后用省略号省略,只需要加上以下的css就行了。

.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

3行css搞定,但是问题来了:如果我们想要当文本被省略的时候,也就是当文本超出指定的宽度后,鼠标悬浮在文本上面才展示popper,应该怎么实现呢?

CSS帮我们搞定了省略,但是JS并不知道文本什么时候被省略了,所以我们得通过JS来计算。接下来,我将介绍几种方法来实现JS计算省略。

createRange


我发现Element-plus表格组件已经实现了这个功能,所以就先来学习一下它的源码。

源码地址:https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/events-helper.ts

// 仅仅粘贴相关的
const cellChild = (event.target as HTMLElement).querySelector('.cell') 
const range = document.createRange()
range.setStart(cellChild, 0)
range.setEnd(cellChild, cellChild.childNodes.length)
let rangeWidth = range.getBoundingClientRect().width
let rangeHeight = range.getBoundingClientRect().height
/** detail: https://github.com/element-plus/element-plus/issues/10790
* What went wrong?
* UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost
precision during internal calculations. In the example above:
* - Expected: 188
* - Actual: 188.00000762939453
*/
const offsetWidth = rangeWidth - Math.floor(rangeWidth)
if (offsetWidth < 0.001) {rangeWidth = Math.floor(rangeWidth)
}
const offsetHeight = rangeHeight - Math.floor(rangeHeight)
if (offsetHeight < 0.001) {rangeHeight = Math.floor(rangeHeight)
}const { top, left, right, bottom } = getPadding(cellChild) // 见下方
const horizontalPadding = left + right
const verticalPadding = top + bottom
if (rangeWidth + horizontalPadding > cellChild.offsetWidth ||rangeHeight + verticalPadding > cellChild.offsetHeight ||cellChild.scrollWidth > cellChild.offsetWidth
) {createTablePopper(parent?.refs.tableWrapper,cell,cell.innerText || cell.textContent,nextZIndex,tooltipOptions)
}

// 上面代码17行中的getPadding函数
const getPadding = (el: HTMLElement) => {const style = window.getComputedStyle(el, null)const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0const paddingRight = Number.parseInt(style.paddingRight, 10) || 0const paddingTop = Number.parseInt(style.paddingTop, 10) || 0const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0return {left: paddingLeft,right: paddingRight,top: paddingTop,bottom: paddingBottom,}
}

document.createRange() 是 JavaScript 中的一个方法,用于创建一个 Range 对象,表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容,然后对其进行操作。

它可以:

  1. 设置选中文本范围:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 setStart() 和 setEnd() 方法设置选中文本的起始和结束位置。
  2. 插入新元素:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 insertNode() 方法将新元素插入到文档中的指定位置。
  3. 获取特定元素的位置:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 getBoundingClientRect() 方法获取元素在文档中的位置和大小信息。

这边element就是使用range对象的getBoundingClientRect获取到元素的宽高,同时因为得到的宽高值有很多位的小数,所以element-plus做了一个判断,如果小数值小于0.001就舍弃小数部分。


接下来,就让我们进行一下复刻吧。

文字的宽度 + 盒子的左右padding  > 盒子的offsetWidth 则存在省略号

<div class="ellipsis box">Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div id="result"></div><script>const box = document.querySelector(".box");const getPadding = (el) => {const style = window.getComputedStyle(el, null);const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;return {pLeft: paddingLeft,pRight: paddingRight,pTop: paddingTop,pBottom: paddingBottom,};};box.addEventListener("animationiteration", function () {const event = new CustomEvent("resize");box.dispatchEvent(event);});const checkEllipsis = () => {const range = document.createRange();range.setStart(box, 0);range.setEnd(box, box.childNodes.length);window.getSelection().addRange(range);const rangeWidth = range.getBoundingClientRect().width; // 所有文字的宽度const rangeHeight = range.getBoundingClientRect().height; // 所有文字的高度console.log(rangeWidth, rangeHeight);const { pLeft, pRight, pTop, pBottom } = getPadding(box);console.log(pLeft, pRight, pTop, pBottom, "--");const horizontalPadding = pLeft + pRight;const verticalPadding = pTop + pBottom;if (rangeWidth + horizontalPadding > box.offsetWidth ||rangeHeight + verticalPadding > box.offsetHeight ||range.scrollWidth > box.offsetWidth) {result.textContent = "计算结果:存在省略号";} else {result.textContent = "计算结果:容器宽度足够,没有省略号了";}};checkEllipsis();box.addEventListener("resize", checkEllipsis);
</script><style>.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.box {border: 1px solid gray;padding: 10px;width: 300px;resize: both;/**触发频率**/animation: resize 0.1s infinite paused forwards;}.box:active {animation-play-state: running;}@keyframes resize {to {opacity: 1;}}
</style>

这篇关于JS如何判断文字是否溢出(被ellipsis)?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/182447

相关文章

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Python如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1:用psutil库(推荐)三、方法2:用os.system调用

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

Python中判断对象是否为空的方法

《Python中判断对象是否为空的方法》在Python开发中,判断对象是否为“空”是高频操作,但看似简单的需求却暗藏玄机,从None到空容器,从零值到自定义对象的“假值”状态,不同场景下的“空”需要精... 目录一、python中的“空”值体系二、精准判定方法对比三、常见误区解析四、进阶处理技巧五、性能优化

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

C++实现回文串判断的两种高效方法

《C++实现回文串判断的两种高效方法》文章介绍了两种判断回文串的方法:解法一通过创建新字符串来处理,解法二在原字符串上直接筛选判断,两种方法都使用了双指针法,文中通过代码示例讲解的非常详细,需要的朋友... 目录一、问题描述示例二、解法一:将字母数字连接到新的 string思路代码实现代码解释复杂度分析三、

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服