text-wrap-balance-line-clamp-002.html (2007B)
1 <!DOCTYPE html> 2 <title>CSS test: balancing and line-clamp</title> 3 <meta charset="utf-8"> 4 <link rel='author' title='Andreu Botella' href='mailto:abotella@igalia.com'> 5 <link rel='help' href='https://drafts.csswg.org/css-overflow-4/#line-clamp'> 6 <link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'> 7 <meta name="assert" content="If the element is affected by line-clamp, the clamping effect is applied first, then the remaining lines are balanced. The width of the ellipsis is taken into account when balancing."> 8 <link rel='match' href="reference/text-wrap-balance-line-clamp-002-ref.html"> 9 <style> 10 div { 11 border: solid; 12 font-family: monospace; 13 font-size: 4rem; 14 line-height: 1rem; 15 margin: 1ch; 16 width: calc(15.1ch / 4); /* fits 15.1 characters at the span's font-size */ 17 } 18 div span { 19 font-size: 1rem; 20 } 21 .test { 22 border-color: blue; 23 24 text-wrap-style: balance; 25 line-clamp: 2; 26 /* This code is unnecessary in any browser that supports the unprefixed version of line-clamp, 27 but neither does it have any detrimental effect, 28 and it broadens the test to browsers that only support the prefixed version */ 29 30 -webkit-line-clamp: 2; 31 display: -webkit-box; 32 -webkit-box-orient: vertical; 33 overflow: hidden; 34 } 35 .ref { 36 border-color: orange; 37 } 38 </style> 39 40 <p>Test passes if the box with a blue frame is identical to the orange one. 41 42 <div class="test"> 43 <span>1 2 3 4 5 6 7 8 9 0 1 2 3456789012345678901234</span> 44 </div> 45 46 <div class="ref"> 47 <span>1 2 3 4 5 6 7 <br> 8 9 0 1 2</span>… 48 </div> 49 50 <!-- 51 The ellipsis's width must be taken into account when balancing. 52 In this case, the ellipsis's width is 4 times the width of characters 53 inside the <span>. 54 55 The optimal balancing with the ellipsis is: 56 |---------------| 57 |1 2 3 4 5 6 7 | 58 |8 9 0 1 2.... | 59 |---------------| 60 61 The optimal balancing without the ellipsis would be: 62 |---------------| 63 |1 2 3 4 5 6 | 64 |7 8 9 0 1 2 | 65 |---------------| 66 -->