break-inside

Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.

Fortunately, you can tell the browser to keep specific elements together with break-inside.

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

At the moment, the property universally accepts the values auto and avoid.

Use avoid on an element within a multi-column layout to keep the property from breaking apart.

Take one extra look at the syntax for this property as there’s some variation among the browsers.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

The property takes after the page break properties and shares the same values. For now, Firefox uses page-break-inside.

<ul class="example"> 
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
  <li>Mauris eu risus.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
  <li>Consectetuer adipiscing elit.</li> 
  <li>Eu risus.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
  <li>Lorem ipsum dolor sit amet</li> 
  <li>Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
</ul>

.example {
  -webkit-columns: 150px;
  -moz-columns: 150px;
  columns: 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;  
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

li {
  background: white;
  padding: 1em;
  margin-bottom: 1.3em;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

Related Properties

• columns
• page-break

Browser Support

Multi-column layout support: