本文介绍一种结合 CSS text-shadow 与 CSS Grid 的巧妙方案，实现在响应式 Flex 换行布局中自动重复显示左侧标签（如 DNA 序列名），无需 JavaScript 即可支持有限规模数据；同时提供可扩展的 JS 动态生成方案，适配超长序列场景。
本文介绍一种结合 css `text-shadow` 与 css grid 的巧妙方案，实现在响应式 flex 换行布局中自动重复显示左侧标签（如 dna 序列名），无需 javascript 即可支持有限规模数据；同时提供可扩展的 js 动态生成方案，适配超长序列场景。
在展示多行对齐的垂直序列数据（例如 DNA 或蛋白质序列）时，一个常见需求是：当字符列因容器宽度不足而换行（flex-wrap: wrap）时，每“行”开头都需重新显示对应的序列名称（如 sequence1、sequence2）。但原生 Flexbox 无法自动重复渲染首列元素——换行后 .stack 容器被重新排列，左侧的名称列不会随内容列一同折行。
直接使用 Flex 实现该效果在纯 CSS 中不可行，但可通过「视觉模拟」巧妙解决：将名称列固定于左侧，利用 text-shadow 在垂直方向上逐行复制文本，使其在每一组序列字符列上方精确对齐出现。
✅ 纯 CSS 方案（适用于中小规模数据）
核心思路是分离布局结构：
- 使用
display: grid构建两列布局：左侧为静态名称列，右侧为可换行的字符列容器； - 对名称列应用多层
text-shadow，每层偏移n × line-height（lh单位），实现“重复打印”效果； - 名称本身设为透明（或与背景同色），仅保留阴影可见，避免文字重叠干扰。
.container {
display: grid;
grid-template-columns: auto 1fr; /* 左侧固定宽，右侧自适应 */
overflow: hidden;
}
.seqences {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0; /* 避免额外间距影响对齐 */
}
.labels {
color: transparent; /* 隐藏原始文字 */
text-shadow:
0 3lh 0 black,
0 6lh 0 black,
0 9lh 0 black,
0 12lh 0 black,
/* …可按需扩展至 50+ 层 */
0 150lh 0 black;
}
.stack {
display: flex;
flex-direction: column;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 24px;
line-height: 1.2; /* 关键：确保 lh 计算准确 */
}⚠️ 注意事项：
lh单位依赖于当前line-height，务必显式设置（如line-height: 1.2），否则行为不可控；text-shadow层数需预估最大换行数（例如 100 行 → 至少 100 层），超出则名称不再显示；- 此法本质是“视觉欺骗”，不生成真实 DOM 节点，因此不支持选中文本、无障碍阅读或动态更新；
- 对超长序列（如百万级字符）性能较差，因浏览器需渲染大量阴影层。
✅ 动态 JS 方案（推荐用于生产环境）
为支持任意长度序列并保持可维护性，建议用轻量 JS 动态生成所需 text-shadow：
<div class="container">
<div class="stack labels" id="labelColumn">
<div>sequence1</div>
<div>sequence2</div>
<div>sequence3</div>
</div>
<div class="seqences" id="contentColumn">
<!-- 动态生成的 .stack 列 -->
</div>
</div>// 配置：最大预期换行数（根据容器最小宽度 & 字符列宽度估算）
const MAX_REPEATS = 400;
const labelColumn = document.getElementById('labelColumn');
const rowCount = labelColumn.children.length;
let shadowValue = '';
for (let i = 0; i < MAX_REPEATS; i++) {
const offset = i * rowCount; // 每组名称高度 = 行数 × 行高
shadowValue += `0 ${offset}lh 0 black,`;
}
shadowValue = shadowValue.slice(0, -1); // 移除末尾逗号
labelColumn.style.cssText = `--label-shadows: ${shadowValue}; color: transparent;`;.labels {
text-shadow: var(--label-shadows);
}此方案优势显著：
-
完全自动化：JS 自动计算
text-shadow层数与偏移，无需手动维护； -
精准对齐：基于实际 DOM 子元素数量（
rowCount）和lh单位，确保每组名称严格对应下方字符列； - 轻量可靠：仅一次计算，无运行时开销，兼容所有现代浏览器；
- 易于扩展：增删序列名称后，只需重新执行 JS 即可生效。
? 总结与选型建议
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 纯 CSS | 静态小数据（ | 无 JS 依赖，简单快速 | 扩展性差、不可访问、难维护 |
| JS 动态生成 | 中大型应用（DNA/蛋白质可视化） | 高度灵活、精准、可维护性强 | 需少量 JS，首次渲染略延迟 |
? 最佳实践：对于科研或生物信息类工具，优先采用 JS 动态方案；若追求极致零依赖且数据可控，再选用纯 CSS 版本。切勿尝试用
::before伪元素或content-repeat（尚未标准化）等非标准方式——它们缺乏浏览器支持与稳定性。
最终效果即如题所述：窗口缩小时，.seqences 自动换行，而左侧名称通过阴影“复刻”出现在每一新行起始位置，实现专业、清晰、可伸缩的序列对齐视图。
