【HTML】div中文字根据容器宽度自适应调整大小，通过js函数实现

admin

2023年8月25日 0:15 本文热度 521

在开发过程中，碰到这样一个需求：在某个价格框内文字在不超过div宽度的情况下，自适应调节自身字体大小。

通过查询资料，css3中貌似不存在某个属性可以让文字根据宽度自适应调节字体大小，固需要通过js控制transform：scale这一属性来实现自适应调节字体大小。

  function refreshPageScalePrice() {
      function autoSetScale(element) {
        const maxWidth = element.dataset.maxWidth || 300
        if (element.clientWidth <= maxWidth) {
          element.style.transform = 'none';
        } else {
          const scaleNum = maxWidth / element.clientWidth;
          element.style.transform = 'scale(' + scaleNum + ')';
        }
    }
    const autoScalePrice = document.queryselectorAll('.scalePrice')
    for (var i = 0; i < autoScalePrice.length; i++) {
      autoSetScale(autoScalePrice[i])
    }
}

某个元素需要自适应宽度，需要在class中添加scalePrice这一属性，并定义data-max-width最大宽度，文字超过该宽度就会自适应调整文字大小。使用前需要调用该函数。

  <div class="left-column">
      <div class="originPrice scalePrice" data-max-width="180">$99,911.11</div>
  </div>

例如：

实现效果：定义font-size:60px 设置最大宽度为180px

①文字内容为6位的情况

②文字内容为10位的情况

可见，文字根据宽度自适应调节大小功能完成！

该文章在 2023/8/25 0:15:41 编辑过