通过JS实现文字大小根据容器宽度自动调整[vue][js]

项目需求:展示国家名称.如果国家的名称过长就自动缩小文字大小,使文字始终展示在一行

效果图:

思路:

1. 获取文字长度.
2. 获取容器宽度
3. 设置默认宽度
4. 当文字长度超过容器的宽度时,用容器宽度/文字长度,得到合适的文字大小.

具体代码:

HTML:

JS:

    // 自动设置文字大小
    sizeFontSize (text) {
      return autoFontSize(16, text, this.offsetWidth)
    },

// ------------- 【 自动计算字体大小 】 -------------
export function autoFontSize(size,text,w){
    const text_length = text.length //获取文字长度
    const dv = w-(text_length*size) //判断是否超过容器
  if (dv<=0) {
    //||size 是防止为0的时候显示错误
    //  -20 是为了两边留点距离
    return ((w-20)/text_length) || size  
  }else{
    return size //不超过容器宽度就默认大小
  }
}

    // 获取所有国家数据
    async getSiteInfo () {
      let res = await editSite({  //获取所有国家数据
        op: 'editgjlist',
        getgjlist: '1'
      })
      if (res.gjlist) { //页面显示赋值
        this.showData = res.gjlist.list
        this.gjlist = res.gjlist.list
      }
      this.$nextTick(() => {  //获取容器的宽度
        const item = document.querySelector('.bottom_item');
        this.offsetWidth = item.offsetWidth
      })

    }
  },

如有更好的方法或疑问,欢迎留言