如何在段落中添加行号？

Question

I'm trying to add line numbers in my paragraph, like shown on the screenshot, but I don't know how. What should I use? CSS or Javascript? Thank you!

Answer 1

You can create custom counter and use counter-increment: custom-counter+5 so it will increment by 5 but it will start from 5 not from 1, but you can add number 1 for first p with :before and exclude it from counter.

 .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

You can use CSS3 counters to achieve it. Assuming your sections are paragraphs:

body {
    counter-reset: section;
}

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

See the reference .

Answer 3

I am assuming you do not want to pre-separate the lines, ie you let the browser automatically add the line-breaks.

You could add a second column / div next to your paragraph and fill it with line numbers. Be sure to use the same line-height so it does not get misaligned.

On the other hand you could base on @LGSon's solution and the lining.js library to access single lines.