
使用 php 的 `explode()` 按换行符分割歌词字符串,再通过循环为每一行末尾追加序号并输出 `
`,即可实现“每行歌词前显示行号”的效果,无需 javascript 或 css 伪元素。
在 Web 开发中,若需为纯文本歌词(如
前显示对应序号(如 1、2…),纯 CSS 无法实现——因为
是自闭合的空元素,不支持 ::before/::after 伪元素,也无法设置计数器(counter-increment 仅对可生成盒的元素生效)。
此时应采用服务端处理:将歌词文本按换行符切分为数组,遍历并拼接序号与
。推荐使用 PHP_EOL(跨平台换行符常量)而非硬编码 "\n" 或 "
",以确保在 Windows/Linux/macOS 环境下均能正确解析原始换行。
✅ 正确示例代码:
<?php
$lyrics = "Every time when I look in the mirror
All these lines on my face getting clearer
The past is gone
And it went by, like dusk to dawn
Isn't that the way?
Everybody's got their dues in life to pay
Yeah, I know nobody knows
Where it comes and where it goes
I know it's everybody's sin
You got to lose to know how to win";
// 按系统换行符分割(兼容性最佳)
$lines = explode(PHP_EOL, $lyrics);
// 输出带序号的每行 + <br>
foreach ($lines as $index => $line) {
echo htmlspecialchars(trim($line)) . ' ' . ($index + 1) . '<br>' . "\n";
}
?>? 关键注意事项:
立即学习“PHP免费学习笔记(深入)”;
- 安全过滤:务必使用 htmlspecialchars() 转义 $line,防止 XSS(尤其当歌词来自用户输入或数据库时);
-
空行处理:若原文含空行,trim($line) 可避免输出类似 " 1";如需保留空行编号,可跳过 trim(),但需单独判断 empty($line) 并输出 " 1
"; -
HTML 结构匹配:此方法生成的是
结尾的内联流式布局;若原设计依赖语义化结构,建议改用
- —— 更语义、更易样式控制,且天然支持 CSS 计数器;
- 性能提示:对于超长歌词(万行级),explode() + foreach 仍高效;若需实时渲染大量动态内容,可考虑流式处理或前端 JS 方案(如 textContent.split(/\r\n|\r|\n/))。
总结:该方案简洁、可靠、零依赖,精准解决「
前插入递增数字」这一典型服务端文本增强需求。核心在于理解
的不可样式化本质,并主动切换至字符串级处理思维。










