text-wrap-balance-003.html (861B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style"> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1881855"> 4 <link rel="match" href="reference/text-wrap-balance-003-ref.html"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 6 <style> 7 div { 8 font: 15px Ahem; 9 width: 35ch; 10 margin: 1em; 11 } 12 .test { 13 text-wrap: balance; 14 color: green; 15 } 16 .ref { 17 color: blue; 18 } 19 </style> 20 <p>Both test blocks (green) should have the same layout as the reference (blue):</p> 21 <div class="test">The quickest brown fox jumped over the lazy dog</div> 22 <!-- inline child elements should not affect wrapping --> 23 <div class="test">The <span>quickest <span>brown</span> fox</span> jumped <span>over</span> the <span>lazy dog</span></div> 24 <div class="ref">The quickest brown fox<br>jumped over the lazy dog</div>