判断一段文字的width

最新推荐文章于 2023-11-08 10:04:35 发布

原创最新推荐文章于 2023-11-08 10:04:35 发布 · 448 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一个JavaScript函数getTextWidth，用于动态创建div元素，测量并返回给定字符串的宽度，以便于满足宽度阈值限制。通过实例演示如何使用该函数来判断字符串'哈哈哈，春意盎然！'的宽度是否超过200px。

判断一段文字的width

将一段文字字符串传入函数动态创建一个div元素，然后返回获取div的宽度即可：（思想就是和图片上传预判断图片的宽高一致）

export const getTextWidth = ({
  str,
  overWidth,
  document,
}: {
  str: string;//需要判断的一段字符串
  overWidth: number;//需要判断的宽度阈值(单位px)
  document: any;
}) => {
  var width = 0;
  var html = document.createElement('span');
  html.innerText = str;
  html.className = 'getTextWidth';
  document.querySelector('body').appendChild(html);
  width = document.querySelector('.getTextWidth').offsetWidth;
  document.querySelector('.getTextWidth').remove();
  return width >= overWidth;
};

console.log(getTextWidth({
  str:'哈哈哈，春意盎然！',
  overWidth:200,
  document
}))