缩放文本以适合元素内部

假设我们要缩放标题内的文本：

<div id="headline">Hello World</div>

首先，我们需要用元素当前的字体大小和文本内容来测量元素的宽度。

const measureWidth = function(text, font) {
    // Measure the width of given text for given font
    ...
};

// Query the element
const ele = document.getElementById('headline');

// Get the styles
const styles = window.getComputedStyle(ele);

// Get the font size and font style
const font = styles.font;
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);

现在我们可以通过比较测量的宽度和全宽来计算元素的缩放比例：

const scale = ele.clientWidth / parseFloat(measured);

最后，我们将字体大小设置为元素放大到全宽：

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;