如何在段落中添加行号？

Question

我正试图在我的段落中添加行号，如屏幕截图所示，但我不知道如何。 我该怎么用？ CSS还是Javascript？ 谢谢！

Answer 1

您可以创建自定义计数器并使用counter-increment: custom-counter+5因此它将增加5但它将从5开始而不是从1开始，但您可以为第一个p添加数字1 :before并将其从计数器中排除。

 .content { width: 200px; counter-reset: custom-counter; } p { display: table; } p:not(:first-child):before { counter-increment: custom-counter+5; content: counter(custom-counter)". "; display: table-cell; color: #aaa; } p:first-child:before { display: table-cell; color: #aaa; content: '1. ' } 

 <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, blanditiis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, eligendi.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, minus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, laboriosam.</p> </div> 

Answer 2

您可以使用CSS3计数器来实现它。 假设你的部分是段落：

body {
    counter-reset: section;
}

p::before {
    counter-increment: section;
    content: counter(section);
}

参见参考文献 。

Answer 3

我假设你不想预先分隔线，即你让浏览器自动添加换行符。

您可以在段落旁边添加第二列/ div，并用行号填充它。 请务必使用相同的行高，以免它错位。

另一方面，您可以基于@LGSon的解决方案和lining.js库来访问单行。