line-clamp-with-abspos-010.html (1089B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: abspos whose containing block is fully before the clamp point gets painted</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-with-abspos-009-ref.html"> 7 <meta name="assert" content="Absolute positioned boxes in a line-clamp container are shown if and only if their containing block precedes or contains the clamp point. In this case, the containing block is fully before the clamp point, so the abspos gets painted."> 8 <style> 9 .clamp { 10 line-clamp: 4; 11 font: 16px / 32px serif; 12 padding: 0 4px; 13 background-color: yellow; 14 } 15 .rel { 16 position: relative; 17 } 18 .abspos { 19 position: absolute; 20 top: 0; 21 left: 0; 22 width: 20px; 23 height: 20px; 24 background-color: skyblue; 25 } 26 </style> 27 <div class="clamp"> 28 <div>Line 1</div> 29 <div class="rel"> 30 <div class="abspos"></div> 31 <div>Line 2</div> 32 <div>Line 3</div> 33 </div> 34 <div>Line 4</div> 35 <div>Line 5</div> 36 </div>