block-ellipsis-010.html (1744B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: block-ellipsis effect on line 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="reference/block-ellipsis-010-ref.html"> 7 <link rel="match" href="reference/block-ellipsis-010-alt-ref.html"> 8 <meta name="assert" content="The block overflow ellipsis is wrapped in an anonymous inline that is assigned line-height: 0."> 9 <style> 10 /* If a line box that has Ahem as its first available font, also has a glyph 11 * from Gentium Plus, assuming no other relevant fonts and line-height: normal, 12 * the line will be ~0.3em taller than it would be if it only had glyphs from 13 * Ahem. 14 * 15 * Since we restrict the Unicode range of Ahem so it doesn't contain the 16 * ellipsis or dot code points, the line-clamp ellipsis will need to be rendered 17 * with Gentium Plus. But since the line-clamp ellipsis has line-height: 0, it 18 * should not grow the height of the line box. 19 */ 20 @font-face { 21 font-family: "Ahem"; 22 src: url("/fonts/Ahem.ttf"); 23 unicode-range: U+0000-002D, U+002F-007E; 24 } 25 @font-face { 26 font-family: "Gentium Plus"; 27 src: url("/fonts/GentiumPlus-R.woff"); 28 } 29 30 .container { 31 display: grid; 32 width: 500px; 33 grid-template-columns: 50% 50%; 34 align-items: end; 35 grid-gap: 40px; 36 } 37 38 .box { 39 background-color: pink; 40 font-family: "Ahem", "Gentium Plus"; 41 font-size: 16px; 42 } 43 .line-clamp { 44 line-clamp: 1; 45 } 46 </style> 47 48 <p>The box in pink at the left should be taller than the right one.</p> 49 50 <div class="container"> 51 <div class="box"> 52 Some content… 53 </div> 54 <div class="box line-clamp"> 55 Some content <br> 56 Clamped 57 </div> 58 </div>