text-wrap-balance-float-005.html (1096B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance"> 3 <link rel="match" href="reference/text-wrap-balance-float-005-ref.html"> 4 <style> 5 .container { 6 font: 20px/1.5 monospace; 7 width: 26.5ch; 8 border: solid 1px; 9 text-wrap: balance; 10 } 11 .float { 12 background: yellow; 13 padding: 0.2em 1ch; 14 line-height: 1.2; 15 float: left; 16 } 17 .float2 { 18 background: cyan; 19 padding: 0.2em 1ch; 20 line-height: 1.2; 21 float: right; 22 } 23 </style> 24 25 <!-- 26 The floats (inc. padding) are 7ch wide, and occupy ~2 lines, 27 so without balancing, layout would be 28 +--------------------------+ 29 | FLOAT abcde fghi jklm nop| 30 | FLOAT qrst uvw FLOAT | 31 |xyx! FLOAT | 32 +--------------------------+ 33 34 Applying text-wrap:balance results in 35 +--------------------------+ 36 | FLOAT abcde fghi | 37 | FLOAT jklm nop FLOAT | 38 |qrst uvw xyx! FLOAT | 39 +--------------------------+ 40 --> 41 <div class="container"><div class="float">FLOAT<br>FLOAT</div>abcde fghi jklm nop<div class="float2">FLOAT<br>FLOAT</div> qrst uvw xyz!</div>