如何让标题元素根据内部文本长度按比例自动调整字号？

长数字溢出问题的核心原因是：连续无分隔的数字串默认不会被浏览器自动断行，仅设置max-width: 100%但缺少盒模型约束、文本溢出规则时，文本会直接撑出固定宽度容器；单纯用vw/em单位是基于容器/视口尺寸做相对缩放，不会根据实际文本长度调整，自然无法解决溢出问题。

方案1：自动缩放字号（推荐，匹配系统原生计算器交互） #

这是主流计算器通用的处理逻辑：短数字用大字号保证观感，数字变长时自动缩小字号保持单行显示，极端场景加省略号兜底，不会出现折行打乱数字阅读逻辑。
首先替换原有#calculation样式：

#calculation {
    text-align: center;
    color: white;
    /* 新增盒模型基础约束 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px; /* 预留左右内边距，避免数字贴容器边缘 */
    overflow: hidden;
    white-space: nowrap; /* 强制单行显示不折行 */
    /* 基础自适应字号：最小16px，随容器宽度动态缩放，最大不超过40px，可根据自身UI调整数值 */
    font-size: clamp(16px, 7vw, 40px);
    text-overflow: ellipsis; /* 字号缩到最小值仍显示不全时，末尾显示省略号兜底 */
}

如果需要更精准的字号控制（完全匹配数字长度缩放），可以搭配渲染进程JS逻辑，每次更新显示内容时调用即可：

const calcDisplay = document.getElementById('calculation');
const BASE_FONT_SIZE = 40; // 短数字默认字号，单位px
const MIN_FONT_SIZE = 16; // 最小可接受字号，避免字太小看不清
const LENGTH_THRESHOLD = 10; // 字符数超过该阈值开始缩小字号

function updateDisplay(content) {
    calcDisplay.textContent = content;
    // 动态调整字号
    const contentLen = content.length;
    if (contentLen > LENGTH_THRESHOLD) {
        const resizeStep = (contentLen - LENGTH_THRESHOLD) * 2; // 每多1个字符字号减2px
        calcDisplay.style.fontSize = `${Math.max(MIN_FONT_SIZE, BASE_FONT_SIZE - resizeStep)}px`;
    } else {
        calcDisplay.style.fontSize = `${BASE_FONT_SIZE}px`;
    }
}

方案2：长数字自动折行（适合多行显示计算过程的场景） #

如果不需要保持单行显示，可以配置强制断行规则，让长数字到容器边界自动折到下一行：

#calculation {
    text-align: center;
    color: white;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    /* 连续长字符强制断行 */
    overflow-wrap: break-word;
    word-break: break-all;
    line-height: 1.3; /* 多行时调整行高避免文字挤在一起 */
}

内容的提问来源于stack exchange，提问作者Baselistic