在CSS3列中插入分栏符 [英] Insert column break in css3 column

问题描述

是否有一种方法可以使用CSS列样式(例如< hr> ，&br; br> 或其他名称)在HTML内容中插入分栏符?

例如您的标题比段落大，标题比段落大，标题比段落大，等等，并且您想在段落后的某个点插入一个中断点，因此列流在那里停止，并且继续流向下一个列.

 部分{列:2;列规则:1pt虚线#ECEEF2；列填充:自动；闯入:避免；//*这是出于设计目的而完成的，我不希望采用CSS方式中断列.*/列宽:280px；栏距:40px;}  

 < section>< h2>文本</h2>< p>文本< p>< p>文本< p>< h2>文本</h2>< p>文本< p>< p>文本< p>< h2>文本</h2>< p>文本< p>< p>文本< p><！-在此处插入分栏符，就像在文字处理程序中一样->< h2>文本</h2>< p>文本< p>< p>文本< p></section> 

解决方案

中断列的方法是用block元素包装元素，这里用 div

完成

我也删除了边距，因为它们会影响中断渲染的方式

 部分{-webkit-columns:2;-moz栏:2；列:2;宽度:100％;}部分 * {边距:0;}div部分{-webkit-column-break-inside:避免；page-break-inside:避免；闯入:避免；}  

 < section>< div>< h2>文本1</h2>< p> text1</p>< p> text1</p>< h2>文本2</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>';});  

 部分{-webkit-columns:2;-moz栏:2；列:2;宽度:100％;}部分 * {边距:0;}div部分{-webkit-column-break-inside:避免；page-break-inside:避免；闯入:避免；}  

 < section>< h2>文本1</h2>< p> text1</p>< p> text1</p>< h2>文本2</h2>< p> text2</p>< p> text2</p>< h2> text3</h2>< p> text3</p>< p> text3</p><！-休息->< h2> text4</h2>< p> text4</p>< p> text4</p></section>  

---

这里还有我的一些示例，使用脚本来完成

• 控制使用CSS样式的文本列属性

---

根据评论进行了更新

有时候需要将CSS列与其他一些技巧(即CSS Flexbox)结合起来

 部分{显示:flex;}部分 * {边距:0;}.columns节{-webkit-columns:2;-moz栏:2；列:2;flex:2;}.columns节{-webkit-column-break-inside:避免；page-break-inside:避免；闯入:避免；}div部分:not(.columns){flex:1;}  

 < section>< div class ="columns">< h2> Etiam euismod risus ut augue egestas</h2>p eatiam euismod risus ut augue egestas，eget egestas orci efficitur.Nuala at neque et nunc viverra bibendum.Vivamus tincidunt non urna et blandit.删除Donec nec posuere.纳拉姆(Rullcus hendrerit)产生了天鹅绒般的天鹅绒般的口感.Vestibulum eu molestie justo.艾尼安mollis dui eget odio blandit和tempus ligula eleifend.Sed m​​olestie lorem mi，ac condimentum nisi elementum a.Morbi purus dui，findbus和mi.hendrerit quis convallis porta.Maecenas enim tellus，commodo eget tristique quis，elementum quis dioo.Donec nisl urna，阿里夸姆(Dui ut)，发酵罐三位一体的狮子座.在维埃纳韦纳托纳tortor id调味品.Fusce sed velit ornare，aliquam ante blandit，suscipit purus.p非对虾，dignissim orci quis，调味品.Quisque vel orci sollicitudin，sodales arcu sollicitudin，valvale elit.Cras tempor mi id arcu faucibus gravida.Vivamus ac portatellus.毛里斯在索利图丁里奥.葫芦菌sollicitudin溃疡.Donec调味品中的调味品.花椰菜花序相生前.Duis vel tincidunt elit.Aenean sem est，bibendum nec euismod quis，egestas an ante.Sed Porttitor nulla eget前Accumsan，AC有效风险feugiat.Nulla tempus imperdiet urna eget accumsan.安特卫普汽车公司的阿埃南(Aenean)早就坐在塞德(Sed non ex orci)身边.Nunc diam diam，commodo vitaor tempor id，feugiat ultrices risus.在超白葡萄酒中，/p.</div>< div>< h2> Lorem ipsum</h2>< orem ipsum dolor坐着，安全地服从精英.Pracient vel luctus lectus，tincidunt congue quam.Vestibulum ipsum turpis，字典在arcu quis，最大值volutpat enim.身份ID Nisi的毛里斯·欧·利奥和自由主义的时代.Nulla tincidunt ut智人与门廊Leus semper molestie quis vel justo的Vestibulum non mauris.Duis sed neque dioo.Sed eget sem ut sapien rhoncus tempus.毛里斯·马克西姆斯(Mauris maximus diam a nibh scelerisque)，以菲尼布斯(nei)裙状饰针状饰物.</div></section>  

Is there a way to insert a column break in HTML content using CSS column style, like <hr>, <br> or something else?

E.g. you have heading than paragraph than heading than paragraph than heading than paragraph etc, and you want to insert a break at some point after a paragraph, so the column flow stops there and the continuation flows to the next column.

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>

    

解决方案

The way to break columns is to wrap the elements with a block element, here done with a div

I also removed the margins since they affect how that break renders

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>

---

Another way is to use a small script, here done with a simple comment as a break marker

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>

---

Here is a few more samples of mine, doing this using a script

• Take control of text styled with css columns attribute

---

Updated based on a comment

Sometimes one need to combine CSS columns with some other technique, i.e. 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>

这篇关于在CSS3列中插入分栏符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！