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

2023-01-07 365

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

最终效果

这是具体的代码片段

具体实现

这里我使用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`;
  }
}