css在元素之前中断列而不破坏包装器

Question

我想要的结果，总是在特定元素之前中断，在这种情况下是h2：

https://jsfiddle.net/hv0sm40o/3/

HTML

<div class="columns">
<h2>Jelly pastry chocolate cake pastry</h2>
<p>
Marshmallow cake pie carrot cake donut lemon drops. Candy canes toffee powder cake jelly lollipop lollipop. Oat cake danish cake biscuit lollipop sweet muffin donut chocolate bar. Marshmallow sugar plum caramels jelly beans chocolate bar tootsie roll. Croissant wafer soufflé sugar plum.
</p>
<h2>Marshmallow toffee toffee</h2>
<p>
Chocolate cake dessert tart oat cake liquorice powder. Halvah cotton candy bonbon dessert chocolate chocolate cake. Gummi bears chocolate cake bonbon caramels. Biscuit donut cupcake pastry icing cheesecake cookie. Cake tootsie roll bonbon carrot cake wafer tart jelly-o pudding sesame snaps. Jelly wafer wafer bear claw candy canes marzipan macaroon bear claw. Wafer jujubes dragée gummies donut macaroon liquorice lollipop.
</p>
<h2>Pudding candy dragée sugar plum gingerbread cotton candy sweet roll</h2>
<p>
Pudding fruitcake jujubes lemon drops sweet sweet roll jelly-o cotton candy. Liquorice macaroon powder dragée pastry chocolate cupcake cheesecake brownie. Oat cake cupcake croissant cookie. Bear claw macaroon jelly beans. Soufflé sugar plum sesame snaps jelly beans sesame snaps. Powder oat cake cake dragée cupcake. Jelly biscuit chocolate bar muffin.
</p>
<h2>Danish gummies brownie cupcake muffin cookie tart cake</h2>
<p>
Pie sweet soufflé pie biscuit candy canes dragée brownie sweet roll. Topping muffin gingerbread brownie. Chocolate jelly-o candy bonbon gummi bears marshmallow jelly dragée. Chocolate fruitcake pudding caramels oat cake tart halvah candy canes. Apple pie tart sugar plum pie gummi bears biscuit. Carrot cake fruitcake croissant powder candy. Biscuit lollipop lollipop chupa chups gummi bears sweet jujubes. Marzipan cotton candy lollipop gummi bears tiramisu jujubes ice cream cotton candy dragée. Ice cream danish soufflé halvah.
</p>
</div>

Below fails because column is broke and columns now overflow to the right...

    <div class="columns fails">
<h2>Jelly pastry chocolate cake pastry</h2>
<p>
Marshmallow cake pie carrot cake donut lemon drops. Candy canes toffee powder cake jelly lollipop lollipop. Oat cake danish cake biscuit lollipop sweet muffin donut chocolate bar. Marshmallow sugar plum caramels jelly beans chocolate bar tootsie roll. Croissant wafer soufflé sugar plum.
</p>
<h2>Marshmallow toffee toffee</h2>
<p>
Chocolate cake dessert tart oat cake liquorice powder. Halvah cotton candy bonbon dessert chocolate chocolate cake. Gummi bears chocolate cake bonbon caramels. Biscuit donut cupcake pastry icing cheesecake cookie. Cake tootsie roll bonbon carrot cake wafer tart jelly-o pudding sesame snaps. Jelly wafer wafer bear claw candy canes marzipan macaroon bear claw. Wafer jujubes dragée gummies donut macaroon liquorice lollipop.
</p>
<h2>Pudding candy dragée sugar plum gingerbread cotton candy sweet roll</h2>
<p>
Pudding fruitcake jujubes lemon drops sweet sweet roll jelly-o cotton candy. Liquorice macaroon powder dragée pastry chocolate cupcake cheesecake brownie. Oat cake cupcake croissant cookie. Bear claw macaroon jelly beans. Soufflé sugar plum sesame snaps jelly beans sesame snaps. Powder oat cake cake dragée cupcake. Jelly biscuit chocolate bar muffin.
</p>
<h2>Danish gummies brownie cupcake muffin cookie tart cake</h2>
<p>
Pie sweet soufflé pie biscuit candy canes dragée brownie sweet roll. Topping muffin gingerbread brownie. Chocolate jelly-o candy bonbon gummi bears marshmallow jelly dragée. Chocolate fruitcake pudding caramels oat cake tart halvah candy canes. Apple pie tart sugar plum pie gummi bears biscuit. Carrot cake fruitcake croissant powder candy. Biscuit lollipop lollipop chupa chups gummi bears sweet jujubes. Marzipan cotton candy lollipop gummi bears tiramisu jujubes ice cream cotton candy dragée. Ice cream danish soufflé halvah.
</p>
</div>

CSS

* {
  margin: 0;
}
.columns {
  columns: 2;
  column-gap: 40px;
  column-rule: 1px outset #ebebeb;
  column-rule-style: solid;
  column-width: 160px;
  padding: 40px;
}

h2,
p {
  margin-bottom: 1em;
}

.fails h2 {
  break-before: column;
}

如果它对列不起作用，我会接受其他解决方案，但我希望在这种情况下不需要使用javascript。

我也希望有一种方法，无需添加额外的html元素。

Answer 1

您可以通过将标题和段落包装在您希望的任何容器中来解决此问题。然后将以下内容应用于容器元素：

break-inside: avoid;

https://jsfiddle.net/hv0sm40o/4/

进一步说明，将破坏规则应用于单个元素意味着它们会相应地中断，但是如果你想要将2个元素粘在一起，则需要使用父元素。