js 计算文字宽度

2024-07-18 02:47| 来源: 网络整理| 查看: 265

方式1 利用canvas处理

/* 计算文字宽度 text 需要计算宽度的文字包括空格 font 字体属性比如 `12px sans-serif` */ function getTextWidth(text, font) { // getTextWidth.canvas 这里主要为了复用一个canvas getTextWidth.canvas就是一个全局变量 // getTextWidth.任意变量首次定义只能在getTextWidth函数内定义 // 然后在其他函数内就可以定义 getTextWidth.其他变量但是不建议这么使用 var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); context.font = font; // 不需要在画布上输出就可以计算文字的宽度 var metrics = contexasureText(text); return metrics.width; }

方式2 利用页面控件处理

#ruler { position:absolute; visibility: hidden; white-space: nowrap; z-index: -900; /* white-space: pre 为了处理多空格计算宽度小的问题 */ white-space: pre; } function(text, size, family) { var ruler = document.getElementById("ruler"); ruler.style.fontSize = size; ruler.style.fontFamily = family; 　 ruler.textContent = text; 　return ruler.clientWidth; }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章