最终效果

这是具体的代码片段：

具体实现

这里我使用vue2来进行实现

先给一个盒子固定的长和高，在给他一个边框，便于观察

<div class="app">
        <div class="content" ref='content'>
                掘金
        </div>
</div>

// css
.app {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.content {
    width: 160px;
    height: 60px;
    box-sizeing: border-box;
    border: 4px solid blue;
    font-size: 48px;
    color: rgb(0, 213, 255);
    display: flex;
    align-items: center;
}

顺便把问题大小和布局也写上效果就是这样：

如果内容字数再多一点就会超出来，变成这样：

添加css,让文本不换行

white-space: nowrap;

此时文本就会超出边框

添加超出隐藏的代码

overflow: hidden;

这个时候就会导致文本显示不全

重要的一步来了，如果我给他添加一个横向的滚动

overflow-x: auto;

此时虽然可以拖动滚动条显示，但是也不能完全显示到页面上

重点来了： 当有滚动条时，我们可以监听到DOM元素的滚动长度

使用scrollWidth可以获取的DOM元素的长度
使用offsetWidth获取元素的固定宽度

如果当scrollWidth值大于offsetWidth时，那就说明文本过长，出现了滚动条了

此时就可以用（文本宽度-padding宽度）/ 滚动长度 * 字体基数就可以获取到最佳的字体大小，把这个字体大小赋值给dom元素，就能使文本正常显示在可视区域内

字体基数可以根据初始字体大小设置，为了确保安全，字体基数需要比初始字体大小（40px）小就行了

setFontSize(){
    // 获取dom元素
  const dom = this.$refs.content
  // 获取padding-left值
  const {paddingLeft} = getComputedStyle(dom);
  // paddingLeft 是一个包含 px 的字符串，转化为数字
  const padding = parseFloat(paddingLeft) || 0
  if(dom.scrollWidth > dom.offsetWidth){
      // 设置新的字体大小
    dom.style.fontSize = `${(dom.offsetWidth-padding*2 ) / dom.scrollWidth * 38}px`;
  }
}

在挂载元素的时候调用这个方法，就可以将文本正常显示到页面中了

需要注意的是，字体字号最小就是12px,超过这个字号，即使再小也会显示12px的大小

动手尝试一下吧：

知识点

getComputedStyle该方法需要传入一个dom节点，并且会返回一个对象，该对象包含所有 CSS 属性的值。私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。
offsetWidth 属性是一个只读属性，它返回该元素的像素宽度
scrollWidth属性是一个只读属性，它返回该元素的像素宽度，高度包含内边距（padding）

固定元素宽度根据文本的长度缩小字号，超出缩小字号

最终效果

具体实现

知识点