text-overflow-ellipsis-002.html (769B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: text-overflow with visibility: hidden; and visibility: visible; descendant</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#ellipsing-details"> 6 <link rel="match" href="reference/text-overflow-ellipsis-002-ref.html"> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 #parent { 10 background-color: green; 11 display: inline-block; 12 vertical-align: top; 13 font-family: Ahem; 14 } 15 #element { 16 visibility: hidden; 17 text-overflow: ellipsis; 18 white-space: nowrap; 19 max-width: 4ch; 20 overflow: hidden; 21 } 22 </style> 23 <div id="parent"> 24 <div id="element"><span style="visibility: visible">ABCABCABCABC</span></div> 25 </div>