自动字体大小 - js

Question

如何让字体大小自动调整以使文字不溢出？

const h1 = document.getElementsByTagName('h1')[0];
const content = document.getElementById('content');
let size = parseInt(window.getComputedStyle(h1).getPropertyValue('font-size'));
while (checkIfOverflows(h1, content)){
    size--;
    h1.style.fontSize = size + 'px';
}

function checkIfOverflows(element, parent){
    const oldWidth = element.style.width;
    element.style.width = 'fit-content';
    const parentRect = parent.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    const overflows = (parentRect.right - elementRect.right < 0);
    element.style.width = oldWidth;
    console.log(overflows);
    return overflows;
}

h1 有一个稳定的左边缘和 nowrap，checkIfOverflows 在检查一次时起作用，但在这个循环中不起作用，如果它首先溢出，它会永远循环，这意味着它很可能是一个计时问题或其他类似的奇怪的东西

Answer 1

看起来这个问题与 DOM 的动态特性和 CSS 属性的更新方式有关。一种可能的解决方案是结合使用 requestAnimationFrame 和更强大的溢出检查。您可以通过以下方式修改代码来实现此目的：

• 使用 requestAnimationFrame 确保样式更改正确 在再次检查溢出之前渲染。
• 简化 checkIfOverflows 函数。

这是更新后的代码：

javascript

const h1 = document.getElementsByTagName('h1')[0];
const content = document.getElementById('content');
let size = parseInt(window.getComputedStyle(h1).getPropertyValue('font-size'));

// Use a function to resize the text
function adjustFontSize() {
    if (checkIfOverflows(h1, content)) {
        size--;
        h1.style.fontSize = size + 'px';
        // Use requestAnimationFrame to ensure the style changes are rendered before the next check
        requestAnimationFrame(adjustFontSize);
    }
}

function checkIfOverflows(element, parent) {
    const parentRect = parent.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    return elementRect.right > parentRect.right;
}

// Start the adjustment process
adjustFontSize();

说明：

• requestAnimationFrame：该函数用于确保 字体大小调整与浏览器的重绘同步进行 循环。它安排 adjustmentFontSize 函数在 下一次重绘，确保所有样式更改都在之前渲染 循环的下一次迭代。

• checkIfOverflows：该函数计算边界矩形 元素及其父元素的右边缘，以检查元素的右边缘是否超出父元素的右边缘。

确保代码正确运行的步骤：

• 初始字体大小：确保h1的初始字体大小 元素设置得足够大，以至于可能会溢出。这样， adjustmentFontSize 函数有机会减小字体大小，如果 必要的。

• CSS 属性：确保 h1 元素的空白属性是 如果您想防止文本换行，请设置为 nowrap。

这是一个简单的 CSS 示例，以确保 h1 不换行：

css

h1 {
    white-space: nowrap;
}

通过这些调整，您的字体大小应逐渐减小，直到适合父容器而不溢出。