Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

首先，column-break-before: always;不在正确的位置，它应该插入CSS ...如果column-break-before是有效的CSS属性，它将起作用。

情况并非如此，您正在寻找break-before规则（break-before - MDN），根据以下内容，您将无法使用当前的HTML：

break-before CSS属性定义页面，列或区域中断在生成框之前的行为方式。 如果没有生成框，则会忽略该属性。

尝试修改代码（删除文本容器中的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>

Answer 2

这是一个有效的例子。 https://jsfiddle.net/2f715kcp/

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</style>
</head>
<body>

<div class="newspaper">
one
<div>two</div> 
<div>three</div>
</div>

</body>
</html>

如果删除它，它将工作class =“column-break-before：always;”

Css column-break-before not working

2 个答案: