使用css编号的段落

时间:2017-01-02 05:32:22

标签: javascript html css

我养成了写一个又一个长篇段的坏习惯。作为一种帮助我自己直观扫描我的文档并找到一些迫切需要分解的段落的方法,我想在某些方法中在我的段落旁边添加行号。纯CSS会很整洁,但由于这只适合我,JS也很好。在自己的标签中包装每一行不是一个选项:这是一个不断变化的文档。奖励积分:每隔5行或其他数字。希望我的措词很明确;如果没有,我可以澄清。

(在一个不相关的说明中:关于段落在它过长之前可以获得多长时间的任何意见?)

编辑:好的,基于我到目前为止所得到的评论和答案,似乎我无可救药地不清楚。让我们再试一次。假设我有两个段落。第一段是十行,当前字体,浏览器宽度等。第二段非常短,只有3行长。然后我想要第一段旁边的数字1到10,以及第二段旁边的数字1到3。有意义吗?

1 个答案:

答案 0 :(得分:2)

不确定您到底在找什么

如果您希望使用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>

希望这有帮助