Css column-break-before not working

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を動作しません。

をブレークする前に、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> 

あなたはこれを削除した場合、それはクラスに動作します=「列ブレーク・ビフォア：常に;」