动态字体场景下，如何让div的width:fit-content生效适配内容？

问题代码 #

<div style="
        text-align      : center;
        font-size       : min(calc(var(--fp-title-font-ratio-h) *100vh),calc(var(--fp-title-font-ratio-w) *100vw));
        color           : var(--brand-color);
        background      : rgba(0,0,0,0.0);
        margin-top      : 0px;
        z-index         : 500;
        width           : fit-content;
        left            : calc(var(--fp-title-left-ratio-h) * 100vw - (var(--fp-title-left-ratio-w) * 100vw));
        transform       : translateX(0%);
        position        : absolute;
        border-radius   : 10px;
        text-align      : left;
        font-family     : 'Playfair Display', serif;
        text-shadow     : 1px 1px 2px #040b0a,  0 0 0.2em #040b0a;
        ">
    MY TEXT IS VERY LONG ABCDEFGH
</div>

问题描述 #

所有自定义变量均已定义。页面加载初期div可适配文本宽度，但字体大小更新后，div未随之调整，导致文本换行。该问题在Chromium和Firefox中均存在，即使使用width:fit-content（Firefox测试了width:-moz-fit-content）也无效。屏幕尺寸为1920x1080时，文本换行问题会显现。已尝试display:inline或display:inline-block，无效果，需要纯CSS解决方案，无需JavaScript。

可行解决方案 #

方案1：min-content宽度 + 强制不换行 #

将原样式中的width: fit-content;替换为：

width: min-content;
white-space: nowrap;

min-content会让元素宽度取文本不换行时的最小固有宽度，配合white-space: nowrap彻底禁止文本换行，确保字体大小更新后，浏览器会重新计算div宽度以适配内容。

方案2：强制不换行配合fit-content #

保留width: fit-content;，添加white-space: nowrap;：

width: fit-content;
white-space: nowrap;

直接阻止文本换行，让fit-content能正确计算文本单行时的宽度，避免字体变大后因宽度未更新导致换行。

方案3：使用display: table #

给div添加display: table;样式：

display: table;

表格元素的宽度计算逻辑会自动跟随内容变化，即使字体大小更新，也会重新计算宽度适配单行文本，同时不影响绝对定位的布局。

原理说明 #

问题核心是浏览器在字体大小动态更新后，未重新触发fit-content的宽度计算。上述方案通过改变元素宽度计算逻辑或强制文本不换行，让浏览器必须重新计算元素宽度以适配内容。

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