css - 如何按比例上下拉伸 CSS 网格项目？

Question

我想以某种方式显示标题

1. 填充整个宽度，在每个字形之间应用相等的字母间距
2. 减少到最大可用宽度，平均重叠每个字形

到目前为止，我最好的尝试是使用 CSS 网格，grid-template-columns: repeat(auto-fit, minmax(0, max-content));如下justify-content: space-between;所示：

h1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  justify-content: space-between; 
}

<h1>
  <span>W</span><span>i</span><span>l</span><span>d</span><span> </span><span>S</span><span>p</span><span>a</span><span>c</span><span>e</span>
</h1>

虽然我的第一个要求在上述解决方案中匹配，但在缩小时，具有不同宽度的相邻字母（尤其是“W”和“i”可见）将首先重叠，然后是其他字母，如下所示：

有没有办法强制字形均匀/同时重叠（就像他们会使用 一样grid-template-columns: repeat(auto-fit, minmax(0, 1fr));）但同时保持每个字形的初始宽度？

标签： cssflexboxcss-gridtypography