break-before column和page的效果实例页面

展示

代码

• HTML：

  <h4 class="fill">page-before: auto（columns布局）</h4>
  <div class="columns">
      <h2>CSS世界</h2>
      <p>CSS2.1相关知识，CSS世界知识体系的地基，大量的细节与原理，阅读体验酣畅淋漓，受益匪浅。</p>
      <h2>CSS选择器世界</h2>
      <p>CSS选择器相关知识，系统介绍CSS选择器使用的经验、细节和衍生出来的高级应用技巧，以及大量全新的CSS选择器知识。</p>
      <h2>CSS新世界</h2>
      <p>CSS2.1之后的CSS新特性介绍，涵盖布局、视觉表现和移动开发等方面，是一个全新的世界。</p>
  </div>        
  
  <hr>
  
  <h4 class="fill">page-before: column（columns布局）</h4>
  <div class="columns break-columns">
      ...
  </div>        
  
  <h4 class="fill">page-before: auto</h4>
  <div>
      ...
  </div>
  <h4 class="fill">page-before: page</h4>
  <div class="break-page">
      ...
  </div>

• CSS：

  .columns {
      columns: 2;
      gap: 10px;
  }
  .break-columns h2 {
      page-break-before: column;
      break-before: column;
  }
  
  .break-page h2 {
      page-break-before: page;
      break-before: page;
  }