如何在段落中添加行号？

Question

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

Answer 1

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

＆＃13;

＆＃13;

.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. '
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

                       N2 = len(r1)*len(r3) - (len(r1)-1)**2

请参阅reference。

Answer 3

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

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

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