工具函数(文本超出盒子宽度自动缩小字体)

文本超出盒子宽度自动缩小字体

const textResize = (el, minFont = 8)=>{
    const text = el.textContent;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 复制原元素字体样式
    ctx.font = getComputedStyle(el).font;
    //盒子宽度
    const elWidth = el.clientWidth; 
    //盒子内文本字体大小
    let fontSize = parseFloat(getComputedStyle(el).fontSize);
    // 循环缩小字体
    while (ctx.measureText(text).width > elWidth && fontSize > minFont) {
      fontSize--;
      ctx.font = `${fontSize}px ${getComputedStyle(el).fontFamily}`; // 更新字体大小
    }
    el.style.fontSize = `${fontSize}px`;
}