在 css3 列中插入分栏符

Question

有没有办法使用 CSS 列样式在 HTML 内容中插入分栏符，例如 <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>

Answer 1

分列的方法是用块元素包裹元素，这里用 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>

Answer 2

要在具有 css 属性列的元素中插入分栏符，您需要插入任何具有 css 属性 column-break-before:always; 的元素它将强制文本和其他元素在该点中断并在下一栏中继续。我注意到我们不能用 <br> 做到这一点，但用 <hr> 又可以了。对于 <hr>，您可能想隐藏边框。

在 css3 列中插入分栏符

Insert column break in css3 column

css

css-multicolumn-layout