使用CSS的行编号段落



我有一个不断漫长的段落的坏习惯。为了帮助自己在视觉上扫描我的文档并找到一些迫切需要分解的段落,我希望某种方法在段落旁边有线号。纯CSS会很整洁,但是由于这仅适合我,因此JS也很好。将每条线包装在自己的标签中不是一个选项:这是通量中的文档。奖励积分:每5行或其他数字。希望我的措辞很清楚。如果没有,我可以澄清。

(在一个无关的说明中:关于段落可以在太长之前可以得出多长时间的任何意见?)

编辑:好的,根据评论和到目前为止我得到的答案,看来我毫无希望地不清楚。让我们再试一次。假设我有两个段落。第一段长10行,在当前字体,浏览器宽度等中。第二段非常短,长3行。然后,我希望第一段旁边的数字1到10,第二段旁边的数字1到3。有意义?

不确定您到底要寻找什么

如果您正在使用CSS使用数字P标签,则可以使用CSS-COUNTERS

进行

检查此片段

.container {
  counter-reset: pcount;
}
p::before {
  content: counter(pcount) "):";
  counter-increment: pcount;
}
<div class="container">
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p</p>
  <p>This is p</p>
</div>

希望这有帮助

最新更新