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

编程问答 2023-01-06

问题描述

我想以某种方式显示标题

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

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

h1 {
  display: grid;
  grid-template-columns: repeat(auto-fit,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”可见）将首先重叠，在其他字母之前，如下所示：

enter image description here

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-gridflexboxflexboxtypography