• 周一. 8月 15th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

js 计算文字宽度

admin

11月 28, 2021

方式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 = context.measureText(text);
    return metrics.width;
}

方式2 利用页面控件处理

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

  

发表回复

您的电子邮箱地址不会被公开。