段落中的行编号CSS&；HTML

我正在尝试为内容创建一种类似代码的样式，以响应不同的窗口大小。我想用纯CSS对一个段落的行数进行编号，但我还没有弄清楚怎么做。我相信一定有某种方式，考虑到我最近在纯CSS中看到的所有酷而神奇的东西

这是我到目前为止所做的，但它显然只是对段落进行编号

p:before {
    counter-increment: para;
    content: counter(para);
    margin-right: 7px;
}

用于分叉的小提琴：

想法

• 也许可以通过创建一个与段落高度相同的

  ：：before

  来伪造它（不知何故），并一直计数到底部
• 也许可以根据区域动态地将每一行的段落转换为单独的
  ，并从中正常计数
• 也许我们可以在段落的左边设计一个房间，然后用另一种方式在那里画出伯爵

这里有一些示例内容供参考。我不控制格式

<p>
Cupcake ipsum dolor sit amet pie tart. Brownie pudding lemon drops fruitcake pastry jelly-o cake macaroon cookie. Dessert wafer biscuit cookie gummies sweet carrot cake. Dragée fruitcake I love marzipan gingerbread sugar plum. I love brownie oat cake I love toffee chocolate jelly marzipan. Jelly beans powder gummies chocolate powder caramels powder sweet. Chocolate cake carrot cake I love. Sugar plum gummi bears chocolate bar dragée carrot cake bear claw apple pie chocolate cake topping. I love candy canes bonbon sweet tart jelly beans caramels dragée. Gingerbread I love dragée muffin chupa chups I love toffee sweet I love. Jelly-o toffee danish powder gingerbread I love I love bear claw. I love dragée jujubes I love oat cake. Pie chocolate bar cotton candy. Macaroon fruitcake jujubes danish candy canes lemon drops I love sesame snaps.
</p>
<p>
Pastry cotton candy tiramisu bonbon powder gummi bears cotton candy. Biscuit jelly powder I love cheesecake pudding topping. Cheesecake lollipop dessert pastry marshmallow icing cotton candy halvah chocolate. Donut brownie lollipop jelly-o jujubes jelly-o. Liquorice pie cake toffee cake. Icing pastry pie gingerbread cupcake chocolate cake. I love cookie cake croissant marzipan jelly beans cupcake cheesecake marshmallow. Chocolate cake apple pie chupa chups chocolate cake candy canes biscuit I love cookie sweet. Cotton candy caramels topping sweet roll muffin. Gingerbread cake icing pastry pudding fruitcake lollipop halvah I love. Tiramisu tootsie roll macaroon liquorice. Toffee marzipan macaroon toffee jelly-o cupcake pastry gummies ice cream. Jelly candy canes sweet roll lollipop.
</p>

纸杯蛋糕ipsum dolor sit amet馅饼挞。布朗尼布丁柠檬滴水果蛋糕糕点果冻蛋糕杏仁饼干。甜点威化饼干饼干软糖甜胡萝卜蛋糕。水果蛋糕我喜欢杏仁饼姜饼糖李子。我喜欢布朗尼燕麦蛋糕我喜欢太妃糖巧克力果冻杏仁饼。果冻豆粉胶冻巧克力粉焦糖粉甜。巧克力蛋糕胡萝卜蛋糕我喜欢。糖李子树胶熊巧克力棒胡萝卜蛋糕熊爪苹果派巧克力蛋糕顶部。我喜欢糖果棒棒糖甜馅饼果冻豆焦糖果酱。姜饼，我喜欢德拉吉松饼，我喜欢太妃糖，我喜欢。果冻太妃糖丹麦姜饼粉我爱我爱熊爪。我喜欢酸枣，我喜欢燕麦蛋糕。派巧克力棒棉花糖。杏仁饼水果蛋糕枣丹麦糖果棒柠檬滴我喜欢芝麻快照。


糕点棉花糖提拉米苏邦邦粉gummi熊棉花糖。饼干果冻粉我喜欢芝士蛋糕布丁。芝士蛋糕棒棒糖甜点糕点棉花糖糖衣棉花糖halvah巧克力。甜甜圈布朗尼棒棒糖果冻枣果冻。甘草派蛋糕太妃糖蛋糕。糖霜糕点派姜饼纸杯蛋糕巧克力蛋糕。我喜欢饼干蛋糕牛角面包杏仁糖果冻豆纸杯蛋糕芝士蛋糕棉花糖。巧克力蛋糕苹果派chupa巧克力蛋糕糖果手杖饼干我喜欢饼干甜。棉花糖、焦糖、甜卷松饼。姜饼蛋糕糖霜糕点布丁水果蛋糕棒棒糖halvah我喜欢。提拉米苏烤杏仁饼甘草卷。太妃糖杏仁饼杏仁饼太妃糖果冻o纸杯蛋糕糕点口香糖冰淇淋。果冻糖果棒甜卷棒棒糖。

---

来自纸杯蛋糕Ipsum的文本：

文本编辑器为每一行指定一个唯一的行号，如回车所示。如果文本只是换行到多行，它仍然只会被分配一个行号

考虑到这一点，并考虑到您正在使用HTML，回车将由

元素表示

因此，下面的代码将找到所有

元素，在

元素上拆分它们的内容，并将结果行包装在

元素中

Array.prototype.slice.call（document.queryselectoral（'p'））
.forEach（（p）=>{
p、 innerHTML=p.innerHTML.split（“
”）
.map（（l）=>`${l.trim（）}`）
.加入（“”）；
});
正文{
计数器复位：p；
}
p{
保证金：0；
左侧填充：40px；
}
p>span{
显示：块；
边缘底部：5px；
位置：相对位置；
}
p>span:：之前{
反增量：p；
内容：计数器（p）”；
左：-30px；
位置：绝对位置；
}

Lorem ipsum dolor sit amet、Concetetur Adipising Elite

多洛雷斯、驱蚊长臂猿、小口鼠、杜西摩犬的发明者除外

圣马尼照明有限公司的宗旨是：。费塞尔。


Lorem ipsum dolor sit amet，奉献精英。所有人都被认为是暂时的解决方案。
您需要将
p
标记包装在
包装器中，然后使用
计数器icreament
可以实现这一点


.wrapper{
计数器重置：我的可怕计数器；
}
p{
计数器增量：我的可怕计数器；
}
p:以前{
内容：计数器（我最棒的计数器）；
右边距：7px；
}


纸杯蛋糕ipsum dolor sit amet馅饼挞。布朗尼布丁柠檬滴水果蛋糕糕点果冻蛋糕杏仁饼干。甜点威化饼干饼干软糖甜胡萝卜蛋糕。水果蛋糕我喜欢杏仁饼姜饼糖李子。我喜欢布朗尼燕麦蛋糕我喜欢太妃糖巧克力果冻杏仁饼。果冻豆粉胶冻巧克力粉焦糖粉甜。巧克力蛋糕胡萝卜蛋糕我喜欢。糖李子树胶熊巧克力棒胡萝卜蛋糕熊爪苹果派巧克力蛋糕顶部。我喜欢糖果棒棒糖甜馅饼果冻豆焦糖果酱。姜饼，我喜欢德拉吉松饼，我喜欢太妃糖，我喜欢。果冻太妃糖丹麦姜饼粉我爱我爱熊爪。我喜欢酸枣，我喜欢燕麦蛋糕。派巧克力棒棉花糖。杏仁饼水果蛋糕枣丹麦糖果棒柠檬滴我喜欢芝麻快照。


糕点棉花糖提拉米苏邦邦粉gummi熊棉花糖。饼干果冻粉我喜欢芝士蛋糕布丁。芝士蛋糕棒棒糖甜点糕点棉花糖糖衣棉花糖halvah巧克力。甜甜圈布朗尼棒棒糖果冻枣果冻。甘草派蛋糕太妃糖蛋糕。糖霜糕点派姜饼纸杯蛋糕巧克力蛋糕。我喜欢饼干蛋糕牛角面包杏仁糖果冻豆纸杯蛋糕芝士蛋糕棉花糖。巧克力蛋糕苹果派chupa巧克力蛋糕糖果手杖饼干我喜欢饼干甜。棉花糖、焦糖、甜卷松饼。姜饼蛋糕糖霜糕点布丁水果蛋糕棒棒糖halvah我喜欢。提拉米苏