text-box-trim-multicol-011-ref.html (745B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 4 <style> 5 .container { 6 width: 640px; 7 height: 400px; 8 background: yellow; 9 } 10 .multicol { 11 columns: 3; 12 column-fill: auto; 13 height: 500px; 14 gap: 20px; 15 font-family: Ahem; 16 font-size: 50px; 17 line-height: 100px; 18 orphans: 1; 19 widows: 1; 20 } 21 .up-half { 22 position: relative; 23 top: -25px; 24 } 25 </style> 26 <div class="container"> 27 <div class="multicol"> 28 <div style="height:225px; background:cyan;"></div> 29 xxx<br> 30 xxx<br> 31 <div style="break-before:column;" class="up-half"> 32 xxx<br> 33 xxx<br> 34 </div> 35 </div> 36 </div>