js简单准确计算动态字符串宽度

最近在项目中遇到需要计算字符串宽度，根据动态的字符串宽度去做出超出宽度省略文字的效果，以下是我觉得比较简单方便的方法，记录一下：

1.定义计算字符串长度函数

function getTextWith(text, fontStyle) {
  var canvas = document.createElement('canvas')
  var context = canvas.getContext('2d')
  context.font = fontStyle || '16px' // 设置字体样式
  var dimension = context.measureText(text)
  return dimension.width
}

2.使用

getTextWith(children.innerText,'14px Arial, PingFang SC, PingFang SC Regular, sans-serif')

第一个参数：需要计算的字符串

第二个参数：字符串的样式