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

在工作中前端程序员们肯定会遇到文本超出的问题

到底是超出省略还是超出隐藏，这就需要根据需求规则而定了

今天我们要实现的就是，根据文本的长度缩小字号

最终效果

这是具体的代码片段：

具体实现

这里我使用vue2来进行实现

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

掘金


// 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;
} 
1
2
3
4
5
6
7
8

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

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

添加css,让文本不换行

white-space: nowrap; 
1

此时文本就会超出边框

添加超出隐藏的代码

overflow: hidden; 
1

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

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

overflow-x: auto; 
1

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

重点来了： 当有滚动条时，我们可以监听到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) || 0if(dom.scrollWidth > dom.offsetWidth){// 设置新的字体大小dom.style.fontSize = `${(dom.offsetWidth-padding*2 ) / dom.scrollWidth * 38}px`;}
} 
1
2

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

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

动手尝试一下吧：

知识点

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