html - Css column-break-before 不工作

Question

我有以下简单文档。我正在尝试使用 column-break-before。虽然它不起作用。我不明白为什么这不起作用。

.newspaper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 40px;
  /* Firefox */
  column-gap: 40px;
}

<p><strong>Note:</strong> The column-gap property is not supported in Internet Explorer 9 and earlier versions.</p>

<div class="newspaper">
  <div class="column-break-before: always;"></div>
  <div>This should start in second column...</div>
</div>

Answer 1

首先，column-break-before: always; 不在正确的位置，应该在 CSS 中插入...如果 column-break-before 是一个有效的 CSS 属性，它可以工作。

事实并非如此，您正在寻找 break-before 规则 ( break-before - MDN )，根据以下内容，它不适用于您当前的 HTML:

The break-before CSS property defines how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.

尝试修改您的代码(删除文本容器内的 div):

.newspaper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 40px;
  /* Firefox */
  column-gap: 40px;
}

<p><strong>Note:</strong> The column-gap property is not supported in Internet Explorer 9 and earlier versions.</p>

<div class="newspaper">
  <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta porttitor congue. Suspendisse elit massa, feugiat quis elit a, vestibulum mattis purus. Duis auctor ultricies tellus, nec lacinia nunc. Maecenas lacinia in lorem et pulvinar. In vulputate
    nec ipsum dictum commodo. Phasellus ullamcorper lobortis arcu at accumsan. Sed dui augue, sollicitudin vel vulputate id, facilisis at lacus. Vestibulum scelerisque ligula ac commodo facilisis. Mauris diam nibh, eleifend sed aliquet sit amet, semper
    elementum leo. Mauris non velit nec lorem consequat consectetur. Integer tempor ante mauris, quis fringilla dui luctus at. Aliquam at sollicitudin est. In tincidunt leo nunc, nec dictum arcu tincidunt eget. Suspendisse quis lectus eu enim blandit
    iaculis. Aenean dignissim fringilla semper. Pellentesque ac ex risus. Sed id egestas enim. Nam auctor ornare varius. Curabitur sed egestas turpis. In et auctor dolor. Aliquam erat volutpat. Aliquam faucibus volutpat lobortis. Sed nec dui sit amet
    arcu hendrerit tempus. Aliquam nisl nulla, malesuada at ex convallis, luctus dignissim tortor. Cras tempor dui nec nisi vestibulum, in sagittis elit placerat. Duis quis metus egestas, efficitur eros quis, tincidunt nibh. Duis a lorem suscipit, egestas
    velit eget, molestie diam. Pellentesque et consectetur augue. Maecenas ac ex et turpis scelerisque tempor. Suspendisse convallis, sem eget bibendum dignissim, est turpis porta purus, vel tempus neque ligula nec nisl. Vivamus quis mi et quam imperdiet
    imperdiet. Donec pretium diam vitae enim tempus accumsan. Duis nunc justo, bibendum vel enim at, ullamcorper blandit est. Proin fringilla, erat in varius vulputate, mi felis vestibulum ligula, non interdum lacus tellus in leo. Mauris ac sem vitae
    justo auctor fringilla nec sit amet turpis. Donec bibendum turpis ut ex elementum, a iaculis magna tempus. Nullam dapibus, neque at dictum interdum, arcu tortor blandit lorem, vitae laoreet tortor dui eu diam. Curabitur sollicitudin massa non tincidunt
    venenatis. Aliquam a nibh ut nulla aliquam consectetur in non enim. Proin sed enim non mi malesuada vestibulum. Pellentesque diam sapien, convallis vitae libero ut, malesuada auctor nulla. Aliquam id turpis massa. In tincidunt lectus nulla. Aenean
    urna ligula, rhoncus at viverra ac, interdum id ante. Ut ornare aliquet purus, nec dignissim nisi porta ut. Sed neque purus, auctor eget rutrum non, imperdiet eget mauris. In interdum lorem et purus congue condimentum. Curabitur rutrum lacus quis
    lorem tristique, et sodales eros vehicula. Vestibulum ultrices vulputate risus, et placerat orci. Nulla vulputate lectus sit amet laoreet condimentum. Etiam porta dolor sit amet neque semper tincidunt. Aenean et malesuada sem, quis sodales odio. Proin
    at pulvinar purus, vel convallis dolor. Ut diam nunc, consectetur quis velit quis, faucibus sollicitudin erat. Donec porta blandit metus at tincidunt. </p>
</div>