line-clamp-auto-032.tentative.html (1421B)
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-032-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: 5px; 22 } 23 .abspos { 24 position: absolute; 25 right: 0; 26 height: 100px; 27 width: 100px; 28 background-color: skyblue; 29 } 30 </style> 31 32 <!-- 33 The bottom margins of both the first `.inner` and of `.collapse-through` end 34 at the clamp boundary, since the bottom margin of `.inner` collapses through 35 `.collapse-through`. This also puts the static position of `.abspos` at the 36 clamp boundary, which means it will be visible. 37 --> 38 39 <div class="clamp"> 40 <div class="inner">Line 1 41 Line 2 42 Line 3 43 Line 4</div> 44 <div class="collapse-through"></div> 45 <div class="abspos"></div> 46 <div class="inner">Line 5 47 Line 6 48 Line 7 49 Line 8</div> 50 </div>