line-clamp-auto-031.tentative.html (1454B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: `line-clamp: auto` margin collapsing accounts for self-collapsing boxes</title> 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="match" href="reference/line-clamp-auto-031-ref.html"> 7 <meta name="assert" content="With `line-clamp: auto`, if a clamp point might fall inside a box, its margins are accounted for correctly. This is the case even for self-collapsing boxes before the clamp point."> 8 <style> 9 .clamp { 10 line-clamp: auto; 11 max-height: calc(4lh + 2 * 5px); 12 font: 16px / 32px serif; 13 background-color: orange; 14 } 15 .inner { 16 white-space: pre; 17 margin: 5px; 18 background-color: yellow; 19 } 20 .collapse-through { 21 margin: 10px; 22 } 23 .rel { 24 position: relative; 25 } 26 .abspos { 27 position: absolute; 28 right: 0; 29 height: 100px; 30 width: 100px; 31 background-color: skyblue; 32 } 33 </style> 34 35 <!-- 36 The bottom margin of the first `.inner` ends at the clamp boundary, and the 37 bottom margin of `.collapse-through` ends after it. The clamp point therefore 38 is before `.collapse-through`, so `.rel` will be after the clamp point and 39 `.abpos` won't be visible. 40 --> 41 42 <div class="clamp"> 43 <div class="inner">Line 1 44 Line 2 45 Line 3 46 Line 4</div> 47 <div class="collapse-through"></div> 48 <div class="rel"><div class="abspos"></div></div> 49 <div class="inner">Line 5 50 Line 6 51 Line 7 52 Line 8</div> 53 </div>