canvas测量文字的真实宽度

（一）前言
需求是这样，我们要求antd的table内部的文字都不换行，然后要兼容小屏幕，那么就需要设置scroll值，但是设置值后，会出现偏移，那时候需要设置列columns的宽度，但是之前行可以换行，放不下，会自动换行，现在只有一行展示，在不确定返回的宽度时候，我们就需要实现计算当前行的宽度，自动为他设置上

（二）实现
具体实现，包含计算纯文本的宽度，设置render的宽度，和手动设置宽度，计算scroll的x的宽度，等一系列计算。这里我只介绍如果计算纯文本中计算出当前的宽度

这里我们使用 context.measureText api去获取某些文本的宽度

// 获取文字宽度 -> 默认字体为table样式 14px
export function getTextWith(
  text = '',
  fontStyle = '14px/1.5715 "Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif"', // 设置字体大小和字体
) {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.font = fontStyle
  // console.log('@context', context)
  const elem = context.measureText(text)
  return elem.width
}

上面代码就可以获取当前文字的宽度。

参考链接1
参考链接

后续

计算render的宽度，可选这种计算children，保证你代码render中都是children

react-innertext

当然对应大部分不是children，需要额外代码处理，这里就不写了