discard-multicol-003.html (1440B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: continue:discard on multicol with overflow content, spanners, etc</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#continue"> 6 <link rel="match" href="reference/discard-multicol-003-ref.html"> 7 <meta name="assert" content="Content overflowing a multicol gets discarded with continue: discard, inclding overflow columns and any subsequent content"> 8 <style> 9 div { 10 columns: 3; 11 border: solid 1px; 12 } 13 div p { 14 break-after: column; 15 } 16 .spanner { 17 column-span: all; 18 text-align: center; 19 } 20 21 .test { 22 continue: discard; 23 block-overflow: no-ellipsis; 24 } 25 26 /* incidental to the example, but needed for a controlled rendering :*/ 27 div p { margin: 0; } 28 div { 29 margin: 1em; 30 width: 47ch; 31 font-family: monospace; 32 gap: 1ch; 33 } 34 </style> 35 <p>Test passes if the two boxes bellow are identical. 36 37 <div class="test"> 38 <p>Column 1</p> 39 <p>Column 2</p> 40 <p>Column 3</p> 41 <p>Overflow column 42 <aside class="spanner">Spanner 1</aside> 43 </p> 44 <aside class="spanner">Spanner 2</aside> 45 <p>Following 1</p> 46 <p>Following 2</p> 47 <p>Following 3</p> 48 <aside class="spanner">Spanner 3</aside> 49 <p>Following 4</p> 50 <p>Following 5</p> 51 <p>Following 6</p> 52 </div> 53 <div class="ref"> 54 <p>Column 1</p> 55 <p>Column 2</p> 56 <p>Column 3</p> 57 </div>