| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style> | |
| 4 div { | |
| 5 display: -webkit-inline-box; | |
| 6 width: 100px; | |
| 7 -webkit-box-orient: vertical; | |
| 8 overflow: hidden; | |
| 9 border: solid thin grey; | |
| 10 } | |
| 11 </style> | |
| 12 </head> | |
| 13 <body> | |
| 14 This tests the -webkit-line-clamp property<br><br> | |
| 15 <div style="-webkit-line-clamp: 50%;"> | |
| 16 50% truncation. This is an example of ellipsis-truncation of multi-
line text.<a href="#">More</a> | |
| 17 </div> | |
| 18 <div style="-webkit-line-clamp: 0%;"> | |
| 19 0% truncation. This does the most truncation possible, truncating t
o 1 line.<a href="#">More</a> | |
| 20 </div> | |
| 21 <div style="-webkit-line-clamp: 2;"> | |
| 22 2 lines. This is an example of ellipsis-truncation of multi-line te
xt.<a href="#">More</a> | |
| 23 </div> | |
| 24 <div style="-webkit-line-clamp: 0%; -webkit-line-clamp: 3;"> | |
| 25 Backwards compatible truncation. 3 lines on the latest version of W
ebKit. 1 line on older versions of WebKit.<a href="#">More</a> | |
| 26 </div> | |
| 27 <div style="-webkit-line-clamp: 30%;"> | |
| 28 30% truncation. No link at the end. This is an example of ellipsis
-truncation of multi-line text. | |
| 29 </div> | |
| 30 <div style="-webkit-line-clamp: 3"> | |
| 31 3 lines. No link at the end. This is an example of ellipsis-trunca
tion of multi-line text. | |
| 32 </div> | |
| 33 <div style="-webkit-line-clamp: 0;"> | |
| 34 0 lines. This is an invalid value for -webkit-line-clamp. | |
| 35 </div> | |
| 36 <div style="-webkit-line-clamp: -1;"> | |
| 37 -1 lines. This is an invalid value for -webkit-line-clamp. | |
| 38 </div> | |
| 39 <div style="-webkit-line-clamp: -1%;"> | |
| 40 -1%. This is an invalid value for -webkit-line-clamp. | |
| 41 </div> | |
| 42 <div style="-webkit-line-clamp: 150%;"> | |
| 43 150% truncation. This does the least truncation possible, truncatin
g nothing. | |
| 44 </div> | |
| 45 </body> | |
| 46 </html> | |
| OLD | NEW |