CSS 相当于 TeX 的 \phantom

Question

是否有相当于 TeX 的

\phantom

命令的 CSS，它可以计算文本参数的宽度。

我想写这样的东西：

grid-template-columns: max-content width("100.00") max-content;

作为解决方法，我使用

6ch

，但我仍然想知道如何获取内容中使用

font-family

或

font-variant-numeric

的确切值。

Answer 1

您也许可以使用 CSS 的“等效”幻影 - 伪 before 元素。

这并不能准确给出您所需要的内容（第二列可能比您想要的宽一个字符，但如果都是数字，您可以省略伪元素内容中的最后一个 0）。

此代码片段在第二列中的每个元素上放置一个透明的伪元素，内容为 100.00。

<style>
  .container {
    display: grid;
    grid-template-columns: max-content auto max-content;
    gap: 10px;
    width: fit-content;
    text-align: right;
  }
  
  .container>*:nth-child(3n+2)::before {
    position: relative;
    content: "100.0";
    opacity: 0;
  }
</style>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2.0</div>
  <div>3</div>
  <div>1</div>
  <div>0.0</div>
  <div>3</div>
  <div>12345</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>345678</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

注意：在我尝试过的浏览器上，100.00 不会被选择选取，但我不确定是否所有浏览器都是如此。