CODEWITHSUNDEEP
javascripthtmlcss
Witze1
Witze1

Reputation: 33

How can I add line numbering to my paragraph?

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!

Here is a screenshot

Upvotes: 3

Views: 1285

Answers (3)

Alex
Alex

Reputation: 34998

I am assuming you do not want to pre-separate the lines, i.e. 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.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 2

Grzegorz Pawlik
Grzegorz Pawlik

Reputation: 2216

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.

Upvotes: 1

Related Questions