Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag:

https://i.sstatic.net/fy80H.png

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>

The following scenario is not successful because the column breaks and overflows 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;
}

If the desired outcome cannot be achieved using columns, alternative solutions will also be considered. Ideally, without the need for JavaScript or additional HTML elements.

Answer №1

If you want to address this issue, consider enclosing the heading and paragraph in a container of your choice. Then, add the following style to the container element:

break-inside: avoid;

See an example here.

To clarify further, when applying break rules to individual elements, they will break independently. However, if you want multiple elements to remain together, utilize a parent element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

Submenu failing to appear

After reading a discussion on dropdown menu issues on a popular forum, I am still unable to locate the error on my website: . The submenu on the main top menu is not functioning as it should. My attempt to resolve the problem by changing the overflow sett ...

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

The behavior of Angular 4 CSS and JS changes upon refreshing the page

Every time I try to load a page with this particular script: this.router.navigateByUrl('/report-result/'+report.id); It appears that not all the CSS and JS files are being loaded properly. The bootstrap popovers don't show up, and some ele ...

Vertical alignment is somewhat functioning but not completely

Could someone help me figure out why my green DIV is not vertically aligned in the middle of the red DIV and suggest a solution? Thank you! Link to JSFiddle .wrapper-alt { margin-right: auto; margin-left: auto; width: 980px; display:tab ...

Adapting CSS grid columns based on device screen size

I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve: On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections ...

The functionality of a Cordova application using Framework 7 CSS can vary across different Android devices

A link is shared for reference showcasing how the progress bar appears on Samsung j2 and other Android devices. Here is the link: [https://i.sstatic.net/C9OpS.jpg](https://i.sstatic.net/C9OpS.jpg) On my personal device, the progress bar is displayed at th ...

What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list ...

The process of increasing value through a function in PHP

Looking to create a function that increments a variable when a button is clicked. I have 4 buttons: farm, cave, house, casino The goal is to accumulate the random numbers generated by each button and add them up in the "YOUR GOLD" section. For example, c ...

Can you provide guidance on showcasing mongodb data in a flask template with flask_pymongo?

Apologies if my question seems a bit unclear. I am struggling to display data from MongoDB in a Flask template. The code I have currently isn't working as expected. Here's what I've attempted so far: (I tried to get creative) @app.route(&apo ...

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

Utilizing pop-up alerts and AJAX requests in jQuery forms

I am looking to enhance my website by creating a form using PHP and jQuery. Currently, the form is placed in the footer of my website. However, I want to display the form results in a popup within the main section of the website without requiring a page ...

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

Using a background image in CSS

I'm having an issue with this code. It doesn't seem to be displaying anything on the screen: <!DOCTYPE HTML> <head> <title> CSS(lab2) </title> <meta charset="UTF-8"> <style type = "text/css"> ...

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

Merging Text within the Yii Framework

Can someone explain the process of combining strings in this code, specifically for first_name and last_name? Thank you in advance for your assistance. <?php /* @var $this AuthassignmentController */ /* @var $data Authassignment */ $datamodel = (Memb ...

The issue of JQuery and document ready being triggered multiple times while loading data into a control

Ever since implementing the load function to load content into a DIV upon document ready, I've noticed that all associated functions are firing multiple times (often twice, and sometimes endlessly). The scripts included in the head tag of all pages a ...