标签：容器 style vue 字体大小 dom index const parentWidth

需求：固定宽高的容器，内部文字长度不固定，字号大小需要随着文字数量的变化而变化，使得文字始终以一行撑满容器。

效果如图：

实现思路：
拿到文字所在dom的水平宽度 childWidth，并取得其父级dom的水平宽度 parentWidth。
这里需要对超出父级容器的部分缩小，所以可以用:
parentWidth / childWidth = scalcVal
如果文字长度超出父容器，则会得到一个介于0 ~ 1之间的值，这个值可以直接作为缩放比例使用，再结合css3的transform:scale(x)就能达到我们需要的效果；
tip: transform:scale(x)中，x介于0 ~ 1为缩小，> 1为放大。

代码：

<li v-for="(item, index) in siderNavs" :key="item+index">
    <p :ref="`txtRef-${index}`" :style="`${styleFormate(index)}`">{{ item.name }}</p>
</li>

// 字体大小按照外层box自动缩放
styleFormate(index) {
  this.$nextTick(() => {
    const refObj = `txtRef-${index}`;
    const dom = (this.$refs[refObj] as any); // js可直接使用：this.$refs[refObj]
    const width = dom[0].clientWidth;
    const parentWidth = dom[0].parentNode.clientWidth;
    const multNum = parentWidth / width;
    if (multNum < 1) {
      const num = Math.floor(multNum*100) / 100;
      const style = `transform:scale(${num});`;
      dom[0].style = style;
    }
  });
}

li {
  width: 64px;
  height: 64px;
}
p {
  font-size: 98%;
  white-space: nowrap; // 禁止文字换行，以取到正确的dom宽度
}

标签：容器,style,vue,字体大小,dom,index,const,parentWidth
来源： https://blog.csdn.net/qq_39905409/article/details/122364901

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。