text-wrap-balance-before-after-001.html (969B)
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-001-ref.html"> 4 <style> 5 .container { 6 font: 16px monospace; 7 margin: 1em; 8 width: 60ch; 9 } 10 11 .text1, .text2 { 12 text-wrap: balance; 13 margin-bottom: 1em; 14 outline: 1px dashed gray; 15 } 16 17 /* :before and :after pseudos with display:block and no content should not affect 18 the layout of the paragraph content */ 19 .text2:before, .text2:after { 20 content: ""; 21 display: block; 22 } 23 </style> 24 25 <p>The two paragraphs should look identical, both having balanced lines:</p> 26 27 <div class="container"> 28 <div class="text1"> 29 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 30 </div> 31 <div class="text2"> 32 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 33 </div> 34 </div>