text-wrap-balance-line-clamp-002-ref.html (655B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>CSS Test reference</title> 5 <link rel='author' title='Andreu Botella' href='mailto:abotella@igalia.com'> 6 <style> 7 div { 8 border: solid; 9 font-family: monospace; 10 font-size: 4rem; 11 line-height: 1rem; 12 margin: 1ch; 13 width: calc(15.1ch / 4); 14 } 15 div span { 16 font-size: 1rem; 17 } 18 .test { 19 border-color: blue; 20 } 21 .ref { 22 border-color: orange; 23 } 24 </style> 25 26 <p>Test passes if the box with a blue frame is identical to the orange one. 27 28 <div class="test"> 29 <span>1 2 3 4 5 6 7 <br> 8 9 0 1 2</span>… 30 </div> 31 32 <div class="ref"> 33 <span>1 2 3 4 5 6 7 <br> 8 9 0 1 2</span>… 34 </div>