JS 如何计算一段文本渲染之后的长度【热度: 648】

[yanlele]

关键词：计算文本长度

追加描述
需要根据这个长度来动态计算文本是否折叠， 所以这个文本没有计算出长度是否折叠之前，还不能在用户可视区域渲染出来

要在 JavaScript 中计算一段文本渲染之后的长度，可以通过几种方法来实现。这里的“长度”可以是文本渲染后的像素宽度，它取决于具体的字体、字号、文本内容等因素。以下是一些可行的方法：

1. 创建一个临时元素来计算文本尺寸

这个方法涉及到创建一个与目标文本拥有相同样式（字体、字号等）的临时 DOM 元素，将目标文本内容设置到临时元素中，然后插入到文档流（不可见状态下）来测量其尺寸。测量完成后，再从文档中移除该临时元素。

function getTextWidth(text, font) {
  // 创建一个临时的span元素
  let tempEl = document.createElement("span");
  tempEl.style.visibility = "hidden"; // 确保元素不可见
  tempEl.style.whiteSpace = "nowrap"; // 防止文本换行
  tempEl.style.font = font; // 应用字体样式
  tempEl.textContent = text;

  document.body.appendChild(tempEl);
  let width = tempEl.offsetWidth; // 获取元素的宽度
  document.body.removeChild(tempEl);

  return width;
}

// 示例用法
const font = "16px Arial";
const text = "这是一段测试文本";
console.log(getTextWidth(text, font));

2. 使用 Canvas 的 measureText 方法

如果你不想与 DOM 打交道，也可以使用 Canvas 的 API 来测量文本宽度。CanvasRenderingContext2D.measureText() 方法返回一个对象，该对象包含了给定文本渲染后的宽度（以像素为单位）。

function measureTextWidth(text, font) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  ctx.font = font; // 应用字体样式，格式与 CSS font 属性相同
  let metrics = ctx.measureText(text);
  return metrics.width;
}

// 示例用法
const font = "16px Arial";
const text = "这是一段测试文本";
console.log(measureTextWidth(text, font));

注意事项

• 尽量在文档加载完毕后使用这些方法，特别是如果你依赖于页面上的样式信息时。
• 如果文本在页面上多次出现且样式一致，可以考虑缓存测量结果来提升性能。