Question

我试图为响应不同窗口大小的内容制作类似代码的样式。我想用纯CSS编号的段落行，但我还没有弄清楚如何。我肯定肯定会有一些方法给出我最近用纯CSS看到的所有酷炫和惊人的东西。

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

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

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

...思想

也许有可能通过创建一个与段落高度相同的::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>

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

Answer 1

文本编辑器为每一行分配一个唯一的行号，如回车符所示。如果文本只包含在多行上，则仍然只会为其分配一个行号。

考虑到这一点，并且鉴于您正在使用HTML，回车将由 元素表示。

因此，以下代码将找到所有元素，将其内容拆分为 元素，并将结果行包装在元素中。

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并使用counter-icreament，您可以实现此目标

＆＃13;

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

＆＃13;

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

＆＃13;

工作小提琴here

段落中的编号行CSS＆amp; HTML

2 个答案: