webkit-line-clamp-dynamic-001.html (750B)
1 <!DOCTYPE html> 2 <title>CSS Overflow: appending to a box with -webkit-line-clamp</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> 4 <link rel="match" href="reference/webkit-line-clamp-dynamic-001-ref.html"> 5 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 6 <style> 7 #container { 8 display: -webkit-box; 9 -webkit-line-clamp: 2; 10 -webkit-box-orient: vertical; 11 font-size: 20px; 12 width: 10ch; 13 } 14 </style> 15 <body> 16 <div id="container"> 17 abc def ghi jkl mno pqr stu vwx yz 18 </div> 19 <script> 20 testAppend(); 21 function testAppend() { 22 document.body.offsetTop; 23 let span = document.createElement('span'); 24 span.textContent = '123 456 789'; 25 container.appendChild(span); 26 } 27 </script> 28 </body>