block-ellipsis-010-ref.html (764B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Reference</title> 4 <style> 5 @font-face { 6 font-family: "Ahem"; 7 src: url("/fonts/Ahem.ttf"); 8 unicode-range: U+0000-002D, U+002F-007E; 9 } 10 @font-face { 11 font-family: "Gentium Plus"; 12 src: url("/fonts/GentiumPlus-R.woff"); 13 } 14 15 .container { 16 display: grid; 17 width: 500px; 18 grid-template-columns: 50% 50%; 19 align-items: end; 20 grid-gap: 40px; 21 } 22 23 .box { 24 background-color: pink; 25 font-family: "Ahem", "Gentium Plus"; 26 font-size: 16px; 27 } 28 .ellipsis { 29 line-height: 0; 30 } 31 </style> 32 33 <p>The box in pink at the left should be taller than the right one.</p> 34 35 <div class="container"> 36 <div class="box"> 37 Some content… 38 </div> 39 <div class="box"> 40 Some content<span class="ellipsis">…</span> 41 </div> 42 </div>