当前位置:网站首页>判断一段文字的width
判断一段文字的width
2022-08-09 10:03:00 【高桥靓仔】
判断一段文字的width
将一段文字字符串传入函数动态创建一个div元素,然后返回获取div的宽度即可:(思想就是和图片上传预判断图片的宽高一致)
export const getTextWidth = ({
str,
overWidth,
document,
}: {
str: string;//需要判断的一段字符串
overWidth: number;//需要判断的宽度阈值(单位px)
document: any;
}) => {
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return width >= overWidth;
};
console.log(getTextWidth({
str:'哈哈哈,春意盎然!',
overWidth:200,
document
}))
边栏推荐
猜你喜欢
.equals==
3D printed this DuPont cable management artifact, and the desktop is no longer messy
[贴装专题] 贴装流程中涉及到的位置关系计算
时间复杂度和空间复杂度
字符串函数和内存函数
Battery modeling, analysis and optimization (Matlab code implementation)
Tom Morgan | 人生二十一条法则
[贴装专题] 基于多目视觉的手眼标定
【八大排序③】快速排序(动图演绎Hoare法、挖坑法、前后指针法)
Attentional Feature Fusion
随机推荐
Practical skills: a key for image information in the Harbor, quick query image
MySQL全文索引
7.FileFilter interface
实用小技能:一键获取Harbor中镜像信息,快捷查询镜像
慕课网-简易扑克牌游戏 思路清晰 简易版
基于信号量与环形队列实现读写异步缓存队列
3. Practice the Thread
公里周日
缓存击穿,缓存穿透,缓存雪崩的解释和对应的一些解决方案
IDEA见过就会爱上的超实用快捷键,一键十行!
《刷题日记》2
Technology Sharing | Sending Requests Using cURL
Celebrate ranked 18
Quick sort eight sorts (3) 】 【 (dynamic figure deduction Hoare, digging holes, front and rear pointer method)
[Halcon&定位] 解决Roi区域外的模板匹配成功
m个样本的梯度下降
4. Character stream
BigDecimal用法常用操作记录
[贴装专题] 视觉贴装平台与贴装流程介绍
OSCS开源软件安全周报,一分钟了解本周开源软件安全大事