段落CSS和HTML中的编号行

Question

I'm attempting to make a code-like style for content that is responsive to different window sizes. I want to number lines of a paragraph using purely CSS, but I haven't been able to figure out how. I'm certain there must be some way given all of the cool and amazing things I've seen with pure CSS lately.

Here is what I have so far, but it obviously only numbers the paragraphs.

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

Fiddle for forking: https://jsfiddle.net/joshuarlowry/tsbza4j6/

Ideas...

• Maybe it is possible to fake it by creating a ::before that is the same height of the paragraph (somehow) and counts up until the bottom.
• Maybe it is possible to somehow turn paragraphs into individual <span> for each line dynamically based on the area and count normally off of those.
• Maybe we can style room to the left of the paragraph and draw the count there some other way.

Here is some sample content for reference. I do not control the formatting.

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

Text from Cupcake Ipsum: http://www.cupcakeipsum.com/

Answer 1

A text editor assigns a unique line number to each line as denoted by a carriage return. If the text simply wraps onto multiple lines, it will still only be assigned a single line number.

With that in mind, and given that you're working with HTML, the carriage return would instead be represented by a <br> element.

Thus, the following code will find all <p> elements, split their content on <br> elements, and wrap the resulting lines in <span> elements.

 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

You need to wrap p tags in a wrapper and using counter-icreament , you can achieve this

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

Working fiddle here