段落CSS和HTML中的编号行

Question

我正在尝试为响应不同窗口大小的内容制作类似代码的样式。 我想使用纯CSS为段落编号，但是我还无法弄清楚该怎么做。 我敢肯定，一定有某种方式可以提供我最近使用纯CSS所见过的所有奇妙的东西。

这是我到目前为止的内容，但是显然它仅对段落编号。

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

小提琴分叉： https ： //jsfiddle.net/joshuarlowry/tsbza4j6/

想法...

• 也许可以通过创建::before来伪造它，该::before与段落的高度相同（以某种方式）并计数到底部。
• 也许可以以某种方式根据面积动态地将每一行的段落转换成单独的<span> ，并通常从这些计数中扣除。
• 也许我们可以在段落左侧设置空间样式，然后以其他方式绘制计数。

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

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

来自Cupcake Ipsum的文字： http ：//www.cupcakeipsum.com/

Answer 1

文本编辑器为每行分配一个唯一的行号，如回车符所示。 如果文本仅换行，则仍将仅分配一个行号。

考虑到这一点，考虑到您正在使用HTML，回车符将由<br>元素表示。

因此，以下代码将找到所有<p>元素，将它们的内容拆分到<br>元素上，并将结果行包装在<span>元素中。

 Array.prototype.slice.call(document.querySelectorAll('p')) .forEach((p) => { p.innerHTML = p.innerHTML.split('<br>') .map((l) => `<span>${l.trim()}</span>`) .join(''); }); 

 body { counter-reset: p; } p { margin: 0; padding-left: 40px; } p > span { display: block; margin-bottom: 5px; position: relative; } p > span::before { counter-increment: p; content: counter(p) "."; left: -30px; position: absolute; } 

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit<br> Dolores, nobis repellendus, molestias aperiam aspernatur praesentium, perferendis inventore unde ducimus ab excepturi<br> Sunt illum magni necessitatibus ad similique est tenetur. Facere. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum assumenda dolorem vero soluta commodi maiores temporibus. </p> 

Answer 2

您需要将p标签wrapper在wrapper并使用counter-icreament ，您可以实现此目的

 .wrapper { counter-reset: my-awesome-counter; } p { counter-increment: my-awesome-counter; } p:before { content: counter(my-awesome-counter); margin-right: 7px; } 

  <div class="wrapper"> <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> </div> 

在这里工作