0

How can I keep sibling elements together, without wrapping them in a wrapper element? I tried to play with the break-before and break-after properties without success (tested on Chromium 53).

In the example below it breaks after h2 although I explicity told it not to.

.column {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 3;
  -moz-column-fill: auto;
  /* Firefox */
  column-fill: auto;
}
.column h2,
.column p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.column h2 {
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
  break-after: avoid;
}
.column p {
  -webkit-column-break-before: avoid;
  page-break-before: avoid;
  break-before: avoid;
}
<div class="column column--big">
  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>
  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>

  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>

  <h2>test</h2>
  <p>Le dolor in reprehenderit in voluptate velit esse cillum doloölkäewölk ewäökew äök äöewlk ewäölke äölkew äölkw äöewlk ewroidentddslkjdsölekw ölekwölewk äöewlkäöewlkew äökew lökjdsöldskj öldskj dsölkjds ds, sun anim id est laborum."</p>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
user1415785
  • 342
  • 4
  • 13
  • 1
    `break-before/after` These are experimental properties with no browser support at yet - https://developer.mozilla.org/en/docs/Web/CSS/break-after – Paulie_D Sep 28 '16 at 14:41
  • Thanks. However the page states in a footnote: "WebKit and Blink browsers don't support this property, but some have the non-standard -webkit-column-break-after and -webkit-region-break-after with similar parameters as page-break-after." I used those vendor properties too but no luck... – user1415785 Sep 28 '16 at 14:51
  • You can check this link:-https://css-tricks.com/almanac/properties/b/break-inside/ May be it will help you – Razia sultana Sep 28 '16 at 14:53
  • Thanks. This is what I would use if I could wrap the element in a wrapper. However I'd prefer not to. – user1415785 Sep 28 '16 at 14:54
  • Possible duplicate of [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) – cjl750 Aug 24 '17 at 20:59

0 Answers0