orphans和widows属性效果实例页面

展示

代码

• HTML：

  <h4 class="fill">默认（columns布局）</h4>
  <div class="columns">
      <p>无论文字内容数量是多少，底部至少显示3行。</p>
  </div>
  <div class="columns">
      <p>无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。</p>
  </div>   
  <div class="columns">
      <p>无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。</p>
  </div>  
  
  <h4 class="fill">orphans:3（columns布局）</h4>
  <div class="columns orphans">
      <p>无论文字内容数量是多少，底部至少显示3行。</p>
  </div>
  <div class="columns orphans">
      <p>无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。</p>
  </div>   
  <div class="columns orphans">
      <p>无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。无论文字内容数量是多少，底部至少显示3行。</p>
  </div>     
  
  <h4 class="fill">widows:3（columns布局）</h4>
  <div class="columns widows">
      <p>无论文字内容数量是多少，顶部至少显示3行。</p>
  </div>        
  <div class="columns widows">
      <p>无论文字内容数量是多少，顶部至少显示3行。无论文字内容数量是多少，顶部至少显示3行。</p>
  </div>  
  <div class="columns widows">
      <p>无论文字内容数量是多少，顶部至少显示3行。无论文字内容数量是多少，顶部至少显示3行。</p>
      <p>无论文字内容数量是多少，顶部至少显示3行。</p>
  </div>

• CSS：

  .columns {
      columns: 2;
      gap: 10px;
      margin: .5em 0;
  }
  .orphans p {
      orphans: 3;
  }
  .widows p {
      widows: 3;
  }