是否存在与TeX的\phantom命令等效的CSS文本宽度计算方案？

目前CSS没有原生提供像TeX的\phantom那样，能直接在属性值中计算指定文本宽度的函数（比如你期望的width("100.00")这种语法），但可以通过以下两种方式实现类似的精确宽度匹配需求：

1. JavaScript + CSS 变量（推荐，精度最高） #

这种方法通过实际渲染目标文本，获取其精确宽度后存入CSS变量，再在网格布局中使用：

实现步骤： #

• HTML：添加一个隐藏的内联元素，内容为你需要计算宽度的文本：

  <span class="phantom-text" aria-hidden="true">100.00</span>
  

• CSS：隐藏元素但保留其渲染宽度：

  .phantom-text {
    position: absolute;
    visibility: hidden;
    white-space: nowrap; /* 防止文本换行影响宽度计算 */
    /* 同步目标区域的字体样式，确保宽度计算准确 */
    font-family: inherit;
    font-variant-numeric: inherit;
  }
  

• JavaScript：获取元素宽度并设置CSS变量：

  const phantomEl = document.querySelector('.phantom-text');
  const exactWidth = phantomEl.offsetWidth;
  document.documentElement.style.setProperty('--exact-number-width', `${exactWidth}px`);
  

• 网格布局中使用：

  .your-grid-container {
    grid-template-columns: max-content var(--exact-number-width) max-content;
  }
  

这种方式完全不受字体、数字变体的影响，因为它获取的是文本实际渲染后的精确宽度。

2. 纯CSS方案（有结构局限） #

如果不想使用脚本，可以通过在网格中添加隐藏单元格的方式，让列宽自动匹配文本宽度：

实现代码： #

• HTML：

  <div class="grid-container">
    <div>左侧内容</div>
    <div class="hidden-cell">100.00</div>
    <div>右侧内容</div>
  </div>
  

• CSS：

  .grid-container {
    display: grid;
    grid-template-columns: max-content fit-content(100%) max-content;
  }
  .hidden-cell {
    visibility: hidden;
    white-space: nowrap;
    font-family: inherit;
    font-variant-numeric: inherit;
  }
  

这种方法的局限是需要把目标文本作为网格的一部分，可能会增加布局结构的复杂度，但不需要额外脚本。

关于ch单位的局限 #

你当前使用的6ch是基于字体中数字"0"的宽度计算的，但在比例字体或启用font-variant-numeric: proportional-numeric时，不同数字的宽度会有差异，无法精确匹配"100.00"这类文本的实际宽度，这也是为什么需要更精确方案的原因。

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