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

最新推荐文章于 2024-05-29 10:08:42 发布

前端开发小陈

最新推荐文章于 2024-05-29 10:08:42 发布

阅读量3.4k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_53312997/article/details/126832428

版权

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

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

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

最终效果

这是具体的代码片段：

具体实现

这里我使用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) || 0if(dom.scrollWidth > dom.offsetWidth){// 设置新的字体大小dom.style.fontSize = `${(dom.offsetWidth-padding*2 ) / dom.scrollWidth * 38}px`;}
}

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