使用js动态控制某个css属性值,实现固定宽度,字体大小自适应

通过设置css变量,我们可以动态的控制某个css属性的值,例如

<template>
  <div class="box">{{a}}</div>
</tamplate>

<script>
import {ref} from 'vue'
const a = ref('这是一段可长可短的文字')
</script>

<style>
:root {
  --fs: 16px;
}
.box {
  width: 500px;
  height: 300px;
  font-size: var(--fs)
}
</style>

可以看到,我们设置了一个固定的宽度,为了保证在文字不换行,文字长度不超过盒子大小,我们可以用js来动态的调整字体大小

// 已知字体大小默认为16px,宽度为500px,那么默认情况下容器一行可以容纳 500 / 16 个字
const fontNumProportion = 500 / 16

// 当字数少于 500 / 16 时,不修改文字大小,超出时,使文字数量比等于文字大小比
if(a.length > 500 / 16) {
  const fs = a.length / (500 / 16) * 16  
  document.querySelector(.box).style = `--fs: ${fs}`
}