text-wrap-balance-float-006.html (788B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <link rel="match" href="reference/text-wrap-balance-float-006-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888449"> 8 <style> 9 body { 10 font: 20px/1 monospace; 11 } 12 .float { 13 float: left; 14 width: 15ch; 15 height: 150px; 16 background: silver; 17 } 18 .mask { 19 width: 15ch; 20 height: 150px; 21 background: green; 22 position: absolute; 23 left: 15ch; 24 } 25 .test { 26 width: 28ch; 27 text-wrap: balance; 28 background: red; 29 } 30 </style> 31 </head> 32 33 <body> 34 <p>There should be no red:</p> 35 <div class="float"> 36 <div class="mask"></div> 37 </div> 38 <p class="test"> 39 Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit. 40 </p> 41 </body>