CSS break-inside让分栏列表不中断实例页面

展示

代码

• HTML：

  <h4>默认</h4>
  <div class="container">
      <div class="list">列表内容1</div>
      <div class="list">列表内容2，这个列表内容要比前后列表稍微多一点</div>
      <div class="list">列表内容3</div>
  </div>
  <h4>break-inside: avoid</h4>
  <div class="container break-inside">
      <div class="list">列表内容1</div>
      <div class="list">列表内容2，这个列表内容要比前后列表稍微多一点</div>
      <div class="list">列表内容3</div>
  </div>

• CSS：

  .container {
      width: 300px;
      padding: 10px;
      background-color: #ecf0f1;
      columns: 3;
  }
  .list {
      background: white;
      padding: 10px;
      margin: 0 0 1.3em;
  }
  .break-inside .list {
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
  }