最终效果
这是具体的代码片段
具体实现
这里我使用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元素的滚动长度
- 1.使用
scrollWidth可以获取的DOM元素的长度 - 2.使用
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）
