Вставить разрыв столбца в столбце css3

Есть ли способ вставить разрыв столбца в контент HTML, используя стиль столбца CSS, как <hr>, <br> или что-то другое?

Например, у вас есть заголовок, чем абзац, чем заголовок, чем абзац, чем заголовок, чем абзац и т. Д., И вы хотите вставить разрыв в некоторой точке после абзаца, чтобы поток столбцов останавливался там, а продолжение переходило к следующему столбцу.

section {
  columns: 2;
  column-rule: 1pt dashed #ECEEF2;
  column-fill: auto;
  break-inside: avoid; //* this one is done for design purposes, I don't want a css way of column break. */
  column-width: 280px;
  column-gap: 40px;
}
<section>
  <h2>text</h2>
  <p>text<p>
  <p>text<p>

  <h2>text</h2>
  <p>text<p>
  <p>text<p>

  <h2>text</h2>
  <p>text<p>
  <p>text<p>

  <!-- insert column break here, like you can do in word processor -->
  <h2>text</h2>
  <p>text<p>
  <p>text<p>
</section>

Источник

2 ответа

Решение

Способ разбить столбцы состоит в том, чтобы обернуть элементы блок-элементом, здесь div

Я также убрал поля, так как они влияют на то, как рендеринг

section {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  width: 100%;
}
section * {
  margin: 0;
}
section div {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<section>
  <div>
    <h2>text1</h2>
    <p>text1</p>
    <p>text1</p>

    <h2>text2</h2>
    <p>text2</p>
    <p>text2</p>

    <h2>text3</h2>
    <p>text3</p>
    <p>text3</p>
  </div>
  <div>
    <h2>text4</h2>
    <p>text4</p>
    <p>text4</p>
  </div>
</section>

Другой способ - использовать небольшой скрипт, здесь с простым комментарием в качестве маркера разрыва.

window.addEventListener("load", function() {
  var div = document.querySelector('section');
  div.innerHTML = '<div>' + div.innerHTML.replace(/<!-- break -->/g, '</div><div>') + '</div>';
});
section {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  width: 100%;
}
section * {
  margin: 0;
}
section div {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<section>
    <h2>text1</h2>
    <p>text1</p>
    <p>text1</p>

    <h2>text2</h2>
    <p>text2</p>
    <p>text2</p>

    <h2>text3</h2>
    <p>text3</p>
    <p>text3</p>
    
    <!-- break -->
  
    <h2>text4</h2>
    <p>text4</p>
    <p>text4</p>
</section>

Вот еще несколько моих примеров, делающих это с помощью скрипта

Обновлено на основе комментария

Иногда нужно комбинировать CSS-столбцы с другой техникой, например CSS Flexbox

section {
  display: flex;
}

section * {
  margin: 0;
}

section .columns {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  flex: 2;
}

section .columns {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

section div:not(.columns) {
  flex: 1;
}
<section>
  <div class="columns">
    <h2>Etiam euismod risus ut augue egestas</h2>
    <p>Etiam euismod risus ut augue egestas, eget egestas orci efficitur. Nulla at neque et nunc viverra bibendum. Vivamus tincidunt non urna et blandit. Donec nec posuere erat. Nullam consequat velit in rhoncus hendrerit. Vestibulum eu molestie justo. Aenean
      mollis dui eget odio blandit, et tempus ligula eleifend. Sed molestie lorem mi, ac condimentum nisi elementum a. Morbi purus dui, hendrerit quis convallis porta, finibus et mi. Maecenas enim tellus, commodo eget tristique quis, elementum quis odio.
      Donec nisl urna, aliquam in dui ut, fermentum tristique leo. In viverra venenatis tortor id condimentum. Fusce sed velit ornare, aliquam ante blandit, suscipit purus.</p>
    <p>Vivamus non arcu gravida, dignissim orci quis, condimentum metus. Quisque vel orci sollicitudin, sodales arcu sollicitudin, convallis elit. Cras tempor mi id arcu faucibus gravida. Vivamus ac porta tellus. Mauris at sollicitudin leo. Curabitur ultricies
      sollicitudin ultricies. Donec condimentum nibh in elementum auctor. Praesent aliquam pharetra ex a pulvinar. Duis vel tincidunt elit. Aenean sem est, bibendum nec euismod quis, egestas a ante. Sed porttitor nulla eget ex accumsan, ac efficitur risus
      feugiat. Nulla tempus imperdiet urna eget accumsan. Aenean at ante et sapien vulputate vehicula sodales sit amet est. Sed non ex orci. Nunc diam diam, commodo vitae tempor id, feugiat ultrices risus. In pharetra semper augue ut volutpat.</p>
  </div>
  <div>
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel luctus lectus, tincidunt congue quam. Vestibulum ipsum turpis, dictum in arcu quis, maximus volutpat enim. Mauris eu leo et libero dignissim tempus at id nisi. Nulla tincidunt ut
      sapien et porta. Vestibulum non mauris at leo semper molestie quis vel justo. Duis sed neque odio. Sed eget sem ut sapien rhoncus tempus. Mauris maximus diam a nibh scelerisque, in finibus neque pellentesque.</p>
  </div>
</section>

Источник

Чтобы вставить разрыв столбца внутри элемента со столбцами свойства css, необходимо вставить любой элемент со свойством css. column-break-before:always; Это приведет к разрыву текста и других элементов в этой точке и продолжению в следующем столбце. Я заметил, что мы не можем сделать это с <br> но с <hr> это снова возможно. За <hr> Можно было бы скрыть границы.

Источник
Другие вопросы по тегам