Question

有没有办法使用CSS列样式在HTML内容中插入分栏符，例如<hr>，<br>或其他？

E.g。你有标题而不是标题而不是标题而不是标题而不是标题而不是段落等，并且你想在一个段落之后的某个点插入一个中断，所以列流停在那里并且延续流向下一列。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

以下是我的一些示例，使用脚本执行此操作

Take control of text styled with css columns attribute

根据评论更新

有时候需要将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列中插入列分隔符

2 个答案: