webkit-line-clamp-035.html (942B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: -webkit-line-clamp 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/#webkit-line-clamp"> 6 <link rel="match" href="reference/webkit-line-clamp-035-ref.html"> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 #parent { 10 display: inline-block; 11 background: green; 12 } 13 #clamp { 14 font-family: Ahem; 15 visibility: hidden; 16 display: -webkit-box; 17 -webkit-box-orient: vertical; 18 -webkit-line-clamp: 3; 19 width: 4ch; 20 overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ 21 } 22 </style> 23 <div id="parent"> 24 <div id="clamp"> 25 <span style="visibility: visible"> 26 AAA<br> 27 BBB<br> 28 CCCCCCCCC<br> 29 DDDDDDDDD<br> 30 EEEEEEEEE 31 </span> 32 </div> 33 </div>