动态实现文字大小根据盒子自适应

 //判断 sizeFontSize（userInfo.name） 小于等于16px的时候就让他换行  

<div class="main_userName" :style="{fontSize:sizeFontSize(userInfo.name+'会员注意')<=16?16+'px':sizeFontSize(userInfo.name+'会员注意')+'px'}" >

              {{ userInfo.name }}会员注意

   </div>

const offsetWidth = ref('')

const sizeFontSize = (text) => {

  return autoFontSize(32, text, offsetWidth.value)

}

const autoFontSize = (size, text, w) => {

  const text_length = text.length //获取文字长度

  console.log(text_length,'文字长度')

  const dv = w - text_length * size //判断是否超过容器

  if (dv <= 0) {

    //||size 是防止为0的时候显示错误

    //  -20 是为了两边留点距离

    return (w - 5) / text_length || size

  } else {

    return size //不超过容器宽度就默认大小

  }

}

  nextTick(() => {

    //获取容器的宽度  宽度如果需要动态去  可以获取一下

    //let elements = document.getElementsByClassName('main_userName')

    offsetWidth.value = '96'

  })