line-clamp-033.html (1502B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Images after line-clamp</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="/css/reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content="Images after the clamp point should be hidden"> 8 <style> 9 .clamp { 10 /* Image blocks don't contain lines, and the range between the end of the 11 * first <img class="block"> and the start of the second is an empty line, 12 * which doesn't count as far as line-clamp is concerned. Therefore, the text 13 * "Hidden clamp line" is on the third line. */ 14 line-clamp: 3; 15 width: 150px; 16 line-height: 0; 17 color: transparent; 18 } 19 img { 20 height: 25px; 21 width: 100px; 22 } 23 .atomic { 24 display: inline-block; 25 } 26 .block { 27 display: block; 28 } 29 </style> 30 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div class="clamp"> 33 <img src="/css/support/swatch-green.png"> 34 <img class="atomic" src="/css/support/swatch-green.png"> 35 <img class="block" src="/css/support/swatch-green.png"> 36 <span><img class="block" src="/css/support/swatch-green.png"></span> 37 Hidden clamp line 38 <!-- Clamp point here --> 39 <img src="/css/support/swatch-red.png"> 40 <img class="atomic" src="/css/support/swatch-red.png"> 41 <img class="block" src="/css/support/swatch-red.png"> 42 <span><img class="block" src="/css/support/swatch-red.png"></span> 43 </div>