标签前自动添加递增序号
" />
本文介绍使用 php 对纯文本歌词按换行符分割并动态插入行号，实现在每行末尾（`
` 前）显示递增数字的完整解决方案，适用于无结构化换行文本的编号需求。
在 Web 开发中，若需为一段以
分隔的歌词（或其他纯文本内容）自动添加行号（如“第1行”“第2行”…），不能依赖 CSS —— 因为
是自闭合空元素，不支持 ::before/::after 伪元素，也无法设置计数器（counter-increment）作用域。此时必须借助服务端逻辑进行预处理。
最简洁可靠的方案是：将原始歌词字符串按换行符切分为数组，遍历并拼接行号后重新输出带
的 HTML 行。
✅ 推荐实现（PHP）
$line) {
// $index 从 0 开始 → 行号需 +1；注意空格与
位置
echo htmlspecialchars(trim($line)) . ' ' . ($index + 1) . '
' . "\n";
}
?>? 输出效果（HTML 渲染后）：Every time when I look in the mirror 1 All these lines on my face getting clearer 2 The past is gone 3 ...
⚠️ 关键注意事项
- 安全过滤：务必使用 htmlspecialchars() 转义原始文本，防止 XSS（尤其当歌词来自用户输入或数据库时）；
- 空白处理：trim($line) 可避免因前后空格导致行号前出现多余空格；
- 换行符一致性：PHP_EOL 比硬编码 "\n" 更健壮；若数据来自表单
- 性能友好：该方案时间复杂度 O(n)，适用于千行以内歌词，无需正则或 DOM 解析，轻量高效；
- 不可用于已含 HTML 的内容：若 $lyrics 中已混有 、 等标签，请先用 strip_tags() 或 DOMDocument 清洗，否则 explode() 可能误切标签内部换行。
✅ 进阶建议（可选）
如需支持「点击跳转到某行」或「CSS 样式定制行号」，可改为包裹结构：
echo '' . ($index + 1) . ' ' . htmlspecialchars(trim($line)) . '
' . "\n";
再配合 CSS 控制 .line-number { display: inline-block; width: 2em; text-align: right; margin-right: 0.5em; color: #666; }，提升可维护性与样式灵活性。
总之，用 explode() + foreach 是解决
行号问题最直接、可控且符合 Web 实践的方式——无需 JavaScript，不依赖前端渲染时机，服务端一次生成即完成。
