text-wrap-balance-before-after-002.html (1060B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-balance"> 3 <link rel="match" href="reference/text-wrap-balance-before-after-002-ref.html"> 4 <style> 5 .container { 6 font: 16px monospace; 7 margin: 1em; 8 width: 60ch; 9 } 10 11 .text { 12 text-wrap: balance; 13 outline: 1px dashed gray; 14 } 15 16 .text:before { 17 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; 18 letter-spacing: -0.15ch; 19 display: block; 20 margin-bottom: 1em; 21 } 22 23 .text:after { 24 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; 25 text-wrap-style: stable; 26 display: block; 27 margin-top: 1em; 28 } 29 </style> 30 31 <p>The first two paragraphs should be separately balanced; the third should not use balancing:</p> 32 33 <div class="container"> 34 <div class="text"> 35 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 36 </div> 37 </div>