Avoid a column break within paragraph elements
The short explanation of how to stop p elements from breaking across columns is to use the following rule is:
.column-layout p {
break-inside: avoid;
}Without this CSS rule, paragraphs elements may start in one column and continue in the next column:
This example text is taken from the Wikipedia page on Columns:
A column or pillar in architecture and structural engineering is a structural element that transmits, through compression, the weight of the structure above to other structural elements below. In other words, a column is a compression member. The term column applies especially to a large round support (the shaft of the column) with a capital and a base or pedestal, which is made of stone, or appearing to be so. A small wooden or metal support is typically called a post, and supports with a rectangular or other non-round section are usually called piers.
For the purpose of wind or earthquake engineering, columns may be designed to resist lateral forces. Other compression members are often termed “columns” because of the similar stress conditions. Columns are frequently used to support beams or arches on which the upper parts of walls or ceilings rest.
As soon as the break-inside: avoid rule is appled to paragraphs, paragraphs will tend to start and finish in the same column and a break will only appear after or before paragraph elements.
This example text is taken from the Wikipedia page on Columns:
A column or pillar in architecture and structural engineering is a structural element that transmits, through compression, the weight of the structure above to other structural elements below. In other words, a column is a compression member. The term column applies especially to a large round support (the shaft of the column) with a capital and a base or pedestal, which is made of stone, or appearing to be so. A small wooden or metal support is typically called a post, and supports with a rectangular or other non-round section are usually called piers.
For the purpose of wind or earthquake engineering, columns may be designed to resist lateral forces. Other compression members are often termed “columns” because of the similar stress conditions. Columns are frequently used to support beams or arches on which the upper parts of walls or ceilings rest.