扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中如何计算字符串文本的宽度
  • 172

0
分享到

JavaScript中如何计算字符串文本的宽度

JavaScript字符串计算字符串宽度字符串文本宽度 2023-02-10 18:02:32 172人浏览 泡泡鱼
摘要

目录js计算字符串文本的宽度JS计算任意字符串宽度1.通过 canvas 测量2.通过 DOM 测量3.用个 visibility: hidden总结JS计算字符串文本的宽度 在使用

JS计算字符串文本的宽度

在使用canvas制作动画时，经常需要获取字符串的宽度与边缘进行对比，以下是通过js来获取任意字符串宽度的方法：

function getTextWidth(text, fontSize) {
	// 创建临时元素
	const _span = document.createElement('span')
	// 放入文本
	_span.innerText = text
	// 设置文字大小
	_span.style.fontSize = fontSize + 'px'
	// span元素转块级
	_span.style.position = 'absolute'
	// span放入body中
	document.body.appendChild(_span)
	// 获取span的宽度
	let width = _span.offsetWidth
	// 从body中删除该span
	document.body.removeChild(_span)
	// 返回span宽度
	return width
}

JS计算任意字符串宽度

PS: 是宽度不是长度！

由于像素和字体大小，字节（特别是 UTF-8）等限制因素，所以我们不能直接知道一个字符串所占的实际宽度。

这里提供几种比较测量方法：

1.通过 Canvas 测量


function getTextWidth(text, font) {
  // re-use canvas object for better perfORMance
  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;
}
 
console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

2.通过 DOM 测量

这种方法在字符串中含有多个空格时，测出来的宽度会一样，

例如： ''天猫旗舰店     49.67%(tmall)'' 和 ''天猫旗舰店          49.67%(tmall)'' 测出来的宽度都为 165（此值可能会有差异）

function getTextWidth(str = '') {
  const dom = document.createElement('span');
  dom.style.display = 'inline-block';
  dom.textContent = '天猫旗舰店   49.67%(tmall)';
  document.body.appendChild(dom);
  const width = dom.clientWidth;
  console.log(dom.clientWidth);
  document.body.removeChild(dom);
  return width;
}

3.用个 visibility: hidden

的浮动的层来计算字符串宽度。

在添加的 div 容器里把样式设置为和你实际的 div 一样。

<!DOCTYPE html>
<html> 
<head>
  <script src='Jquery.min.js'></script>
</head>
<body>
  <div
    id='labelText' 
    style='color:black; line-height:1.2; white-space: nowrap; position:fixed;
      top:0px; left:0px; display:block; visibility:visible;'
  ></div>
 
  <script>
    var str = 'Live like you were dying, Love because you do.';
    str = str.substring(0, str.length);
    $('#labelText').CSS({
      'font-size': '12px',
      'font-family': 'Microsoft YaHei'
    }).html(str);
    var width = $('#labelText').width();
    console.log(width);
  </script>
</body>
</html>

计算高度也一样。

最后别忘了移除额外添加的 div！

Code：

let tCanvas = null;
getTextWidth(text, font = 'normal 12px sans-serif') {
  // re-use canvas object for better performance
  const canvas = tCanvas || (tCanvas = document.createElement('canvas'));
  const context = canvas.getContext('2d');
  context.font = font;
  return context.measureText(text).width;
}
 
addStrWidthViaBlank(str, width) {
  // 这个函数只适用于'xxx xx'形式的字符串（即原串就含有空格）
  if (width <= 0 || (this.getTextWidth(str) >= width)) {
    return str;
  }
 
  let tStr = str;
  let tWidth = 0;
  while (tWidth < width) {
    tStr = tStr.replace(/(.*) /, '$1  ');
    tWidth = this.getTextWidth(tStr);
  }
 
  // console.log('tStr>width>>tWidth,', tStr, width, tWidth);
  return tStr;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript中如何计算字符串文本的宽度

本文链接: https://lsjlt.com/news/195593.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中如何计算字符串文本的宽度
    目录JS计算字符串文本的宽度JS计算任意字符串宽度1.通过 Canvas 测量2.通过 DOM 测量3.用个 visibility: hidden总结JS计算字符串文本的宽度 在使用...
    99+
    2023-02-10
    JavaScript字符串 计算字符串宽度 字符串文本宽度
  • JavaScript如何计算字符串中的字符
    这篇文章主要介绍了JavaScript如何计算字符串中的字符，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如何计算字符串中的字符可以使用length属性。const ...
    99+
    2023-06-27
  • php如何计算中文字符串长度
    这篇文章主要为大家展示了“php如何计算中文字符串长度”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“php如何计算中文字符串长度”这篇文章吧。对于这个问题，我们可能第一反应就是使用strlen(...
    99+
    2023-06-20
  • PHP如何计算英文字符串的长度
    本篇内容主要讲解“PHP如何计算英文字符串的长度”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“PHP如何计算英文字符串的长度”吧!PHP中用来计算字符串长度的函数主要有两个：strlen() 和...
    99+
    2023-06-20
  • PHP如何计算字符串真正的宽度和高度像素
    这篇文章主要介绍“PHP如何计算字符串真正的宽度和高度像素”，在日常操作中，相信很多人在PHP如何计算字符串真正的宽度和高度像素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”PHP如何计算字符串真正的宽度和高...
    99+
    2023-07-05
  • java中字符串如何计算字节长度
    目录java字符串计算字节长度1.方法一2.方法二3.代码中运用java截取字符串的指定字节数长度java字符串计算字节长度 通常，计算字符串长度大小方法很多，熟悉的有将字符串写入文...
    99+
    2024-04-02
  • php如何计算字符串的长度
    在php中使用strlen()函数计算字符串的长度，具体方法如下：strlen()函数作用：php中strlen()函数的作用是用于返回字符串的长度。strlen()函数语法：strlen(string)参数：string：需要计算长度的字...
    99+
    2024-04-02
  • javascript如何计算字符串有几个字符
    这篇文章给大家分享的是有关javascript如何计算字符串有几个字符的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 JS统计字符个数的方法：1、利用...
    99+
    2024-04-02
  • c语言怎么计算字符串长度和宽度
    在 c 语言中，计算字符串长度和宽度的函数分别为：strlen() 函数用于计算字符串长度，不包括终止符 '\0'。strwidth() 函数用于计算字符串在终端中的宽度，返回显示像素数...
    99+
    2024-05-14
    c语言
  • 详解php如何正确计算中文字符串的长度
    在PHP编程中，我们常常遇到需要计算字符串长度的场景。一般情况下，我们习惯用 strlen() 函数或 mb_strlen() 函数来计算字符串长度。然而，在处理中文字符串时，我们会发现使用 strlen() 函数会出现问题，因为中文字符不...
    99+
    2023-05-14
    php字符串 php
  • Shell脚本中怎么计算字符串长度和判断字符串
    这期内容当中小编将会给大家带来有关Shell脚本中怎么计算字符串长度和判断字符串，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一些需要注意的脚本问题计算字符串长度可用的三种方法： 代码如下:echo “$...
    99+
    2023-06-09
  • Python计算字符宽度的方法
    本文实例讲述了Python计算字符宽度的方法。分享给大家供大家参考，具体如下： 最近在用python写一个CLI小程序，其中涉及到计算字符宽度，目标是以友好的方式将一个长字符串截取为等宽的片段。 对于uni...
    99+
    2022-06-04
    宽度 字符 方法
  • 批处理如何计算字符串的长度
    这篇文章主要为大家展示了“批处理如何计算字符串的长度”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“批处理如何计算字符串的长度”这篇文章吧。代码如下:@echo off & setloca...
    99+
    2023-06-08
  • C语言如何计算字符串长度
    目录C语言计算字符串长度思路分析1.用while循环实现2.用递归实现3.另一种递归实现计算字符串长度的函数解读总结C语言计算字符串长度 思路分析 字符串的结束标志是’\...
    99+
    2023-02-06
    C语言计算字符串长度 C语言字符串长度 C语言字符串
  • VB.NET中怎么计算文字宽度
    VB.NET中怎么计算文字宽度，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。VB.NET文字宽度计算的代码示例：'被表示的文字列  Dim&n...
    99+
    2023-06-17
  • php怎么正确计算中文字符串的长度
    今天小编给大家分享一下php怎么正确计算中文字符串的长度的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、PHP中字符串长度...
    99+
    2023-07-05
  • Shell脚本中计算字符串长度的5种方法
    有时在Linux操作系统中需要计算某个字符串的长度，通过查询资料整理了下目前Shell中获取字符串的长度的多种方法，在这里分享给大家，方法如下： 方法1: 使用wc -L命令 wc -L可以获取到当前行的长...
    99+
    2022-06-04
    种方法 字符串 脚本
  • PHP如何计算两个字符串的匹配度
    这篇文章主要讲解了“PHP如何计算两个字符串的匹配度”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“PHP如何计算两个字符串的匹配度”吧！计算两个字符串匹配度（相似度），也就是计算两个字符串的...
    99+
    2023-06-20
  • mysql中怎么计算字符串长度
    这篇文章给大家介绍mysql中怎么计算字符串长度，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。　　mysql中计算字符串长度函数　　1、GBK 编码　　char_length 1个中文...
    99+
    2024-04-02
  • PHP计算字符串真正的宽度和高度像素（图片加文字水印示例）
    PHP计算字符串用strlen()只能得到字符串长度，不是宽高像素，使用到了php函数ImageTTFBBox（），就可以根据字体的大小和所用字体计算字符串的宽高像素。 ImageT...
    99+
    2023-02-25
    PHP计算字符串宽度和高度 PHP图片加文字水印
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作