JS计算字符串在浏览器中显示的宽度

js计算字符串宽度

大家可能会碰到这样一个需求：一个容器的宽度固定，当内容的宽度超过容器的宽度时鼠标移入显示提示框，不超过时则不显示。

这个时候就需要知道内容到底多宽。

怎么计算宽度

一、估计法

假设文字大小是14px，如果字符的长度是10，那么内容的宽度大概是14*10=140
，这种方法显然误差很大，数字，特殊字符，英文字母，汉字的大小各不相同。

二、真实计算法

利用offsetWidth获取宽度
有时我们在计算宽度的时候，可能无法获取父节点的dom对象，这个时候怎么办呢？

话不多说直接上代码

function computedTextWidth(text) {let span = document.createElement('span');span.innerHTML = text;span.style.visibility = 'hidden';span.setAttribute('class','fontSize');let width = span.offsetWidth;document.getElementsByTagName('body')[0].removeChild(span);return width;
}
let str = '哈哈哈哈哈哈hhhhhh,。.,%$^!@(*&%^12345';
computedTextWidth(str);

总的思路就是：在计算方法里创建字符串的容器span，在把span挂载到body下，再利用
offsetWidth获取宽度，然后再移除span。

如果字符串有特殊的类，也要把类名加到span上，这样计算的宽度才准确。
计算高度的方法也类似。

JS计算字符串在浏览器中显示的宽度相关推荐

new Date(2019-05-10 08:00:00) 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题...
js new Date("2019-05-10 08:00:00") 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题. 在高级浏览器上new Date ...
java 下载文件大小_如何在浏览器中显示使用角度5下载的文件的文件大小？
我使用答案中的代码在角度5中实现了文件下载: 我有一个spring boot后端,它发送一个http响应对象,它有文件字节数组作为主体和内容类型,内容配置和内容长度 . 我不得不允许暴露的 Heade ...
html在浏览器显示图片,html - 在所有Web浏览器中显示TIFF图像
html - 在所有Web浏览器中显示TIFF图像如何在HTML页面中处理TIFF文件? 我想在HTML页面中显示TIFF文件. 我尝试使用嵌入式标签,对象ID,img等.但我无法在HTML页面中显 ...
如何能在浏览器中显示三维模型
原文地址:如何能在浏览器中显示三维模型作者: 布鲁斯-宋随着BIM的火热发展,以及BIM桌面软件对电脑硬件越来越高的要求,越来越多的企业希望能通过浏览器展示BIM模型,管理BIM模型相关的信息.这 ...
Java Web项目中HTML文件中的汉字在浏览器中显示乱码的解决方案
今天在做一个Java Web项目的时候,html中的汉字在浏览器中显示为乱码,分析其可能原因有: (1)html文件属性中有默认的编码方式,如果它的设置与html文档中content charset属 ...
Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
目录需求描述方案1:直接打印页面方案2:使用css媒体查询控制打印内容方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe ...
如何在浏览器中显示本地文件系统_如何完全卸载浏览器中的Flash插件
Flash插件作为浏览器中常用的插件,经常会出现各种问题,需要重新安装,这里就讲一下如何真正卸载浏览器中的Flash插件. 如何下载网页中的swf文件-百度经验jingyan.baidu.com 适 ...
adobe reader java_请问，如何用JAVA读PDF文件在浏览器中显示，不需要在本地系统中安装Adobe Reader。求java代码...
JAVA读PDF可以实现,重点是如何在网页中显示PDF文件,而且不需要安装AdobeReader.没有安装AdobeReader,在网页显示PDF文件时,浏览器会提示下载.请问如何在网页中显示PDF文 ...
JSP页面在浏览器中显示HTML代码被截断显示不全
本文参考: 参考博文代码明明没错的情况下,把我一天的时间给浪费了..实属把我整自闭了..后面觉得查看了源代码才发现是这样.. 问题描述: 在JSP页面内容过长时,在JSP代码没有错误的情况下,查看页 ...

JS计算字符串在浏览器中显示的宽度

js计算字符串宽度

怎么计算宽度

一、估计法

二、真实计算法

JS计算字符串在浏览器中显示的宽度相关推荐

最新文章

热门文章

JS计算字符串在浏览器中显示的宽度

js计算字符串宽度

怎么计算宽度

一 、估计法

二、真实计算法

JS计算字符串在浏览器中显示的宽度相关推荐

最新文章

热门文章

一、估计法