css 在不破坏包装的情况下打破元素前的列

Question

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

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 个元素粘在一起，则需要使用 parent 元素。

css 在不破坏包装的情况下打破元素前的列

css break column before element without breaking the wrapper

html

css

css-multicolumn-layout