&

【HTML】div中文字根據(jù)容器寬度自適應(yīng)調(diào)整大小，通過js函數(shù)實(shí)現(xiàn)

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年8月25日 0:15 本文熱度 1834

在開發(fā)過程中，碰到這樣一個(gè)需求：在某個(gè)價(jià)格框內(nèi)文字在不超過div寬度的情況下，自適應(yīng)調(diào)節(jié)自身字體大小。

通過查詢資料，css3中貌似不存在某個(gè)屬性可以讓文字根據(jù)寬度自適應(yīng)調(diào)節(jié)字體大小，固需要通過js控制transform：scale這一屬性來實(shí)現(xiàn)自適應(yīng)調(diào)節(jié)字體大小。

  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])
    }
}

某個(gè)元素需要自適應(yīng)寬度，需要在class中添加scalePrice這一屬性，并定義data-max-width最大寬度，文字超過該寬度就會(huì)自適應(yīng)調(diào)整文字大小。使用前需要調(diào)用該函數(shù)。

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

例如：

實(shí)現(xiàn)效果：定義font-size:60px 設(shè)置最大寬度為180px

①文字內(nèi)容為6位的情況

②文字內(nèi)容為10位的情況

可見，文字根據(jù)寬度自適應(yīng)調(diào)節(jié)大小功能完成！

該文章在 2023/8/25 0:15:41 編輯過