如何使用CSS和JS为诗歌诗行添加序号并实现指定排版效果

嘿，我完全懂你现在的困扰——想给诗歌行加序号，但出来的效果总差点意思：要么行对不齐，要么行高乱跳，连空白行都被算进去计数了，咱们一步步把这些问题都解决掉。

先把你核心的需求再理一遍：

• 所有诗行的内容要和第一行完全对齐
• 保持统一的行高，不能忽高忽低
• 空白行绝对不能被计入序号

你的现有代码已经有了基础框架，只需要在几个关键节点调整逻辑和样式就行：

修正后的完整代码 #

JavaScript部分

首先要处理空白行的过滤，避免给空行创建元素，这样计数器就不会给无效行计数了：

const pre = document.getElementById('canto');
const righe = pre.textContent.split('\n');

pre.innerHTML = '';

righe.forEach(riga => {
  const trimmedRiga = riga.trim();
  // 只给非空白的行创建span元素
  if (trimmedRiga) {
    const span = document.createElement('span');
    span.textContent = trimmedRiga;
    pre.appendChild(span);
  }
  // 不管是不是空白行，都保留换行结构，还原诗歌的排版
  pre.appendChild(document.createElement('br'));
});

CSS部分

调整行高、序号的定位方式，确保所有诗行内容对齐，同时统一排版：

pre {
    background-color: #f9f9f9;
    padding: 2rem;
    counter-reset: verso;
    white-space: pre-wrap;
    line-height: 1.5; /* 统一行高，可根据需求调整数值 */
}

pre span {
    display: block;
    margin: 0;
    padding: 0 0 0 2.2em; /* 给序号预留固定宽度的空间 */
    position: relative;
    counter-increment: verso;
}

/* 给每个诗行添加序号，固定宽度实现左对齐 */
pre span::before {
    content: counter(verso) ".";
    position: absolute;
    left: 0;
    width: 1.8em; /* 固定序号宽度，确保诗行内容完全对齐 */
    text-align: right;
    margin-right: 0.4em;
}

HTML部分

保留你原有的结构即可：

<b>With Span</b>
<pre id="canto">
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!
</pre>

<hr>

<b>Without Span</b>
<pre>
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!
</pre>

关键修改说明 #

1. JS逻辑调整：

   • 新增空白行判断，只给非空行创建span，彻底避免空白行被计数器统计
   • 保留所有换行结构，确保诗歌原有的空白行排版不会丢失

2. CSS排版优化：

   • 给pre设置统一的line-height，让所有行的行高完全一致
   • 用padding-left给序号预留固定空间，再通过绝对定位把序号放在这个空间里，同时给序号设置固定宽度并右对齐，确保不管序号是一位数还是两位数，诗行内容都能完美对齐
   • 移除了原有的nth-child(3n+1)选择器，改为给每个有效诗行都添加序号，符合诗歌编号的常规需求

这样调整后，最终效果就会和你参考的无序号示例排版一致，同时还能正确给每个诗行添加对齐的序号，空白行也不会被计数啦。

备注：内容来源于stack exchange，提问作者wav