block-ellipsis-018.html (1424B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: block-ellipsis effect on a fully displaced line's height</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/#block-ellipsis"> 6 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <meta name="assert" content="If the block-ellipsis results in the entire contents of a line box being displaced, the line box is considered to contain a strut. The line box's height will not depend on the height of the displaced content."> 9 <style> 10 .container { 11 position: relative; 12 height: 100px; 13 width: 100px; 14 font: 25px Ahem; 15 } 16 .bg { 17 position: absolute; 18 top: 0; 19 left: 0; 20 color: green; 21 line-height: 25px; 22 } 23 .red { 24 color: red; 25 } 26 .large { 27 font-size: 1.5em; 28 } 29 .clamp { 30 position: absolute; 31 width: 100px; 32 bottom: 0; 33 left: 0; 34 line-clamp: 1; 35 36 color: transparent; 37 background: linear-gradient(to top, green 0, green 1lh, red 1lh); 38 background-position: left bottom; 39 } 40 </style> 41 42 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 43 44 <div class="container"> 45 <div class="bg"> 46 XXXX<br> 47 XXXX<br> 48 XXXX<br> 49 <span class="red">XXXX</span> 50 </div> 51 <div class="clamp"> 52 <span class="red large">XXXXXXXXX XXX</span> 53 </div> 54 </div>