line-clamp-032.html (1803B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Atomic inlines 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="Atomic inlines after the clamp point should be hidden"> 8 <style> 9 .clamp { 10 line-clamp: 4; 11 width: 150px; 12 line-height: 25px; 13 /* The ellipsis would be outside of the 100x100 green square, 14 * and it shouldn't show up. */ 15 color: transparent; 16 } 17 .green { 18 background-color: green; 19 } 20 .red { 21 background-color: red; 22 } 23 .inline-block { 24 display: inline-block; 25 height: 25px; 26 width: 100px; 27 } 28 .inline-flex { 29 display: inline-flex; 30 } 31 .inline-grid { 32 display: inline-grid; 33 grid-template-columns: auto auto; 34 } 35 .inline-table { 36 display: inline-table; 37 } 38 .inline-table span { 39 display: table-cell; 40 } 41 :is(.inline-flex, .inline-grid, .inline-table) span { 42 height: 25px; 43 width: 50px; 44 } 45 </style> 46 47 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 48 <div class="clamp"> 49 <span class="green inline-block">foo</span> 50 <span class="green inline-flex"> 51 <span>bar</span> 52 <span>baz</span> 53 </span> 54 <span class="green inline-grid"> 55 <span>bar</span> 56 <span>baz</span> 57 </span> 58 <span class="green inline-table"> 59 <span>bar</span> 60 <span>baz</span> 61 </span> 62 <!-- Clamp point here --> 63 <span class="red inline-block">foo</span> 64 <span class="red inline-flex"> 65 <span>bar</span> 66 <span>baz</span> 67 </span> 68 <span class="red inline-grid"> 69 <span>bar</span> 70 <span>baz</span> 71 </span> 72 <span class="red inline-table"> 73 <span>bar</span> 74 <span>baz</span> 75 </span> 76 </div>