Cargo Collective网格内文本两端对齐自适应宽度实现咨询

该需求完全可通过纯CSS实现，无需使用SVG资源，同时天然适配深色模式切换与响应式缩放，具体实现方法如下： #

1. 调整HTML结构 #

为目标h1标签添加专属样式类，方便精准控制样式，修改后代码如下：

<div grid-col="x12" grid-pad="0">
  <h1 class="justify-fit-title">CIVITONIA</h1>
</div>

2. 添加核心样式代码 #

将以下CSS代码添加到站点自定义样式区，即可实现文本两端贴边、字号自动适配容器宽度的效果：

.justify-fit-title {
  /* 让标题宽度和父容器完全一致 */
  width: 100%;
  margin: 0;
  padding: 0;
  /* 单行文本两端对齐规则，保证首尾字符贴合容器左右边缘 */
  text-align: justify;
  text-align-last: justify;
  /* 字号随视口宽度自动缩放，无需写死固定值 */
  font-size: 13vw;
  /* 可选：通过clamp限制字号区间，避免极端屏宽下显示异常
  font-size: clamp(2.5rem, 13vw, 11rem); */
  line-height: 1;
  letter-spacing: 0 !important;
}

参数调整说明：13vw为字号相对视口宽度的占比，你可以根据实际视觉效果调整该数值：数值越大字号越大，字符间距越小；数值越小字号越小，字符间距越大，调整到与你之前SVG版本效果匹配即可。如果你的网格容器不是满屏宽度，适当提高该占比数值即可。

3. 深色模式适配 #

由于采用原生DOM文本渲染，文本会自动继承你已配置的深色模式颜色规则，只需补充一条样式避免被默认样式覆盖即可，无需修改现有深色模式切换逻辑：

.dark-mode .justify-fit-title {
  color: inherit;
}

• 如果生效后文本两端仍有细微缝隙，检查父级容器是否存在未清除的默认内边距，你当前已设置grid-pad="0"，确认父级padding值为0即可消除缝隙
• 该方案无需额外引入JS、无需使用图片资源，加载性能优于SVG方案，移动端会随容器宽度自动同步缩放字号，无需单独编写响应式媒体查询

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