咨询：能否实现固定宽度自适应高度的SVG文本堆叠效果？

这个效果既可以用纯CSS实现，也可以通过SVG Text完成，下面分别给出两种实用方案：

一、纯CSS实现方案 #

核心思路是将每个单词作为独立块，通过自定义属性动态计算字体大小，让文本刚好撑满指定宽度：

1. HTML结构（每个单词单独封装）：

<div class="text-block">
  <div class="word" style="--char-count: 4;">This</div>
  <div class="word" style="--char-count: 2;">Is</div>
  <div class="word" style="--char-count: 5;">Stack</div>
  <div class="word" style="--char-count: 8;">Overflow</div>
</div>

2. CSS样式：

.text-block {
  width: 300px; /* 设定目标宽度 */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.word {
  white-space: nowrap;
  text-align: center;
  /* 根据字符数计算字体大小，确保填满容器宽度 */
  font-size: clamp(1.2rem, calc(300px / (var(--char-count) * 0.12)), 6rem);
}

注：0.12是字符平均宽度系数，可根据你使用的字体微调，保证文本刚好撑满容器。如果不想手动设置--char-count，可以用JS批量获取单词长度并赋值，但纯CSS版本需要手动定义该变量。

二、SVG Text实现方案 #

SVG的<text>元素原生支持文本缩放适配指定宽度，代码更简洁：

<svg width="300" height="auto" viewBox="0 0 300 220">
  <!-- 第一行：缩放至300px宽度 -->
  <text x="0" y="40" textLength="300" lengthAdjust="spacingAndGlyphs">This</text>
  <!-- dy控制行间距，后续每行依次下移 -->
  <text x="0" y="80" textLength="300" lengthAdjust="spacingAndGlyphs">Is</text>
  <text x="0" y="120" textLength="300" lengthAdjust="spacingAndGlyphs">Stack</text>
  <text x="0" y="160" textLength="300" lengthAdjust="spacingAndGlyphs">Overflow</text>
</svg>

• textLength="300"：指定文本需要填满的宽度
• lengthAdjust="spacingAndGlyphs"：同时调整字符间距和字形大小，让文本完美适配指定宽度（若仅需调整间距，用spacing即可）
• height="auto"配合viewBox，让SVG高度自动适配内容

方案对比 #

• 纯CSS方案更适合嵌入常规HTML流，便于和其他DOM元素交互；
• SVG方案原生支持矢量缩放，无需计算字符长度，适合需要高清矢量输出的场景。

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