JS计算字符串在浏览器的宽度和高度

需求：

外部容器宽度固定，文本显示超出一行时，显示展开/收起，不超出时不显示

通常如何计算字符串的宽度呢？

通常，都是使用最简单的方法进行计算：

字符串的length*字符串的fontSize

弊端：这种计算的方式误差很大，由于像素和字体大小，字节（特别是 UTF-8）等限制因素，汉字、英文、数字、特殊字符等计算出来的宽度误差，计算出来的结果导致UI展示时达不到预期

如何准确计算字符串的宽度呢？

使用DOM测量

/**
 * 计算字符串在浏览器的宽度和高度
 * @param {*} text 字符串
 * @param {*} fontSize 文本大小
 * @returns size
 */
export function getTextSize(text, fontSize) {
  let span = document.createElement("span");
  let result = {};
  result.width = span.offsetWidth;
  result.height = span.offsetWidth;
  span.style.visibility = "hidden";
  span.style.fontSize = fontSize + "px";
  document.body.appendChild(span);
  if (typeof span.textContent != "undefined") {
    span.textContent = text;
  } else {
    span.innerText = text;
  }
  result.width = span.offsetWidth - result.width;
  result.height = span.offsetHeight - result.height;
  span.parentNode.removeChild(span);
  return result;
}

应用：

const size = getTextSize('示例字符串', 14)
console.log("宽：" + size.width + " 高：" + size.height)

思路：

首先创建字符串的容器span，然后把span挂载到body下，再利用offsetWidth获取宽度和高度，然后再移除span。

参考链接https://blog.youkuaiyun.com/qq_24134853/article/details/100103460