如何在段落中添加行号?

时间:2016-05-22 10:14:42

标签: javascript html css

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

Here is a screenshot

3 个答案:

答案 0 :(得分:2)

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



.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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

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

请参阅reference

答案 2 :(得分:0)

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

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

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