js 计算文字宽度

 

方式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>
复制代码

 

　　

 

posted @   荣超  阅读(2458)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
SQL AI 助手