文本、数字溢出自动缩小功能

最近在做一个项目，但项目数据比较大，数据大小本身就是44像素的，如果数据太大的话容易超出显示区域，从而出现布局错乱

对于这种问题，刚开始本身是想着给内容一个固宽，如果内容太大，超出后显示省略号，然后结合vue中的title属性，鼠标移入的时候给一个提示。

但是！！！！！！ 领导提出新要求，根据字符的多少，可以把字体缩小，效果如下：总之，就是要全部显示，不能隐藏。

领导提出新要求，那只能硬着头皮做了

思路： 因为文字后面的单位要始终跟在文字后面

所以不能给数字设置固宽

数字区域的宽度需要动态的计算出来，即 父元素的宽度 - 单位的宽度 - 边框 - 内外边距

我们需要做的就是判断数字内容的宽度是否超出了上面计算出来的数字区域的宽度，如果超出了，那么就把字体缩小

但是！这还有一个问题需要解决，怎么知道数字内容的宽度，如何计算？

解决： 创建一个元素，然后获取那串数字 元素的innerHTML=那串数字 元素的宽度是被数字撑起来的，这时候元素的宽度就是数字的宽度

基本思路就这么多，接下来我们来看具体代码：

<p class='num'>
 <span class="limitLength" ref="bnlj">1111111111111111</span>
 <b>{{esUnit}}</b>
</p>



  let bnlj=((allWidth-863.4)/3-95.6).toFixed(2);//获取数字区域的宽度
  let bnljLen = this.$refs.bnlj.innerHTML; 
  
  //创建一个span存放bnlj
  var bnljSp = document.createElement('span');
  bnljSp.innerHTML = bnljLen;
  bnljSp.style.fontSize = fontSize + 'px';
  body.appendChild(bnljSp);
  var bnljSpWidth = bnljSp.offsetWidth;
  
  if (bnljSpWidth > bnlj) {
     //减 0.06是根据页面的实际效果适当的把缩放率减小一点，可以根据页面效果自己调节
      let bnljS = (bnlj / bnljSpWidth).toFixed(2)-0.06;//计算字体的缩放率
      this.$refs.bnlj.style.fontSize = fontSize * bnljS + 'px';
                   
   }else if(bnljSpWidth < bnlj){
       this.$refs.bnlj.style.fontSize = fontSize * 1 + 'px';
   }