通过 javascript 动态切分文本并配对渲染，使歌词行与和弦行在容器宽度限制下同步折行，形成视觉上“交错对齐”的专业乐谱效果。
在开发和弦歌词类应用（如吉他谱查看器）时，一个常见且关键的排版需求是：让歌词文字行与上方/下方对应的和弦标记行，在容器边界处协同换行——即当某一行内容因宽度不足需折行时，两行内容应“成对”拆分，保持语义对齐，而非各自独立折行导致错位。
纯 CSS 无法可靠实现此行为（flex-wrap 或 grid 均难以跨元素同步断行），因此推荐采用 基于字符数的 JavaScript 预处理方案：将歌词与和弦文本按预设每行最大字符数（如 38 字符）切分为若干段，再逐段交替插入 DOM，确保每一组 <div class="line">歌词片段</div><div class="line">和弦片段</div> 占据相同视觉宽度区间。
以下为完整可运行实现：
<div class="line-container">
<div class="line">Hello this is are lyrics just for demonstration hey hey hello</div>
<div class="line">Am F G Am Ab Gdim A#</div>
</div>
<script>
const charsPerLine = 38; // 根据字体、字号、容器宽度微调
const computeLine = (line) => {
const regexp = new RegExp(`.{1,${charsPerLine}}`, 'g');
return line.match(regexp) || [];
};
const computeLines = () => {
const lines = [...document.querySelectorAll(".line-container > .line")];
const [text, notes] = lines.map(el => el.textContent.trim());
const textLines = computeLine(text);
const notesLines = computeLine(notes);
const maxLines = Math.max(textLines.length, notesLines.length);
let newHTML = "";
for (let i = 0; i < maxLines; i++) {
newHTML += `<div class="line">${textLines[i] ?? ""}</div>`;
newHTML += `<div class="line">${notesLines[i] ?? ""}</div>`;
}
document.querySelector(".line-container").innerHTML = newHTML;
};
// 页面加载后执行（或配合 resize 事件动态重算）
document.addEventListener('DOMContentLoaded', computeLines);
</script>✅ 关键说明与优化建议：
立即学习“前端免费学习笔记（深入）”；
- charsPerLine 并非绝对精确的像素宽度，而是经验性阈值。实际项目中建议结合 monospace 字体 + ch 单位或使用 canvas.measureText() 实现更精准的字宽计算；
- 若需响应式支持（如窗口缩放），可在 resize 事件中节流调用 computeLines()；
- 为提升可访问性，建议为和弦行添加 aria-hidden="true"，避免屏幕阅读器重复朗读；
- 若原始数据含 HTML 标签（如 <em> 强调词），需改用 DOM 操作替代字符串匹配，防止标签被截断。
该方案轻量、兼容性强（无需现代 CSS 新特性），已在真实音乐类 Web 应用中稳定使用，是解决“双轨同步折行”问题的成熟实践路径。
