Номер стихи стихов с CSS и JS ⇐ Html

[Anonymous]

Я стараюсь читать стихи стихов, но результат не совсем удовлетворительен. /li> Поддерживать последовательную линию. Результат должен соответствовать Второй пустой пример (но с номером). < /p>

Код: Выделить всё

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

pre.innerHTML = '';

righe.forEach(riga => {
const span = document.createElement('span');
span.textContent = riga.trim();
pre.appendChild(span);
pre.appendChild(document.createElement('br'));
});< /code>
pre {
background-color: #f9f9f9;
padding: 2rem;
counter-reset: verso;
white-space: pre-wrap;
}

pre span {
display: block;
margin: 0;
padding: 0;
line-height: 1;
counter-increment: verso;
}

pre span:nth-child(3n+1)::before {
content: counter(verso) " ";
}< /code>
With Span[/b][b]
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!




Without Span[/b]

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!

Подробнее здесь: https://stackoverflow.com/questions/794 ... css-and-js