Skip to content

给定内容字数,计算所占元素宽度(高度)

js
// 计算字长宽度
export const getTextWidth = (text, fontSize) => {
  // fontSize:代表汉字的大小,英文字会自动按照默认值
  var span = document.createElement("span");
  var result = {};
  span.style.visibility = "hidden";
  span.style.fontSize = fontSize;
  span.style.overflow = "hidden";
  span.style.whiteSpace = "nowrap";
  span.style.textOverflow = "ellipsis";
  span.style.position = "absolute";
  document.body.appendChild(span);
  if (typeof span.textContent !== "undefined") {
    span.textContent = text;
  } else {
    span.innerText = text;
  }
  result.width = span.offsetWidth;
  span.parentNode.removeChild(span);
  return result.width;
};

// 计算字长高度
export const getTextHeight = (text, config) => {
  // 元素宽度, 文字字体、大小和行高
  const { width, fontFamily, fontSize, lineHeight } = config;
  var span = document.createElement("span");
  span.style.visibility = "hidden";
  span.style.width = width;
  span.style.fontFamily = fontFamily || "'Public Sans', sans-serif";
  span.style.fontSize = fontSize;
  span.style.lineHeight = lineHeight;
  span.style.overflow = "hidden";
  span.style.position = "absolute";
  document.body.appendChild(span);
  if (typeof span.textContent !== "undefined") {
    span.textContent = text;
  } else {
    span.innerText = text;
  }
  const result = span.offsetHeight;
  span.parentNode.removeChild(span);
  return result;
};
2025( )
今日 8.33%
本周 42.86%
本月 48.39%
本年 4.11%
Powered by Snowinlu | Copyright © 2024- | MIT License