| <html> |
| <head> |
| <style> |
| div { |
| display: -webkit-inline-box; |
| width: 100px; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| border: solid thin grey; |
| } |
| </style> |
| </head> |
| <body> |
| This tests the -webkit-line-clamp property<br><br> |
| <div style="-webkit-line-clamp: 50%;"> |
| 50% truncation. This is an example of ellipsis-truncation of multi-line text.<a href="#">More</a> |
| </div> |
| <div style="-webkit-line-clamp: 0%;"> |
| 0% truncation. This does the most truncation possible, truncating to 1 line.<a href="#">More</a> |
| </div> |
| <div style="-webkit-line-clamp: 2;"> |
| 2 lines. This is an example of ellipsis-truncation of multi-line text.<a href="#">More</a> |
| </div> |
| <div style="-webkit-line-clamp: 0%; -webkit-line-clamp: 3;"> |
| Backwards compatible truncation. 3 lines on the latest version of WebKit. 1 line on older versions of WebKit.<a href="#">More</a> |
| </div> |
| <div style="-webkit-line-clamp: 30%;"> |
| 30% truncation. No link at the end. This is an example of ellipsis-truncation of multi-line text. |
| </div> |
| <div style="-webkit-line-clamp: 3"> |
| 3 lines. No link at the end. This is an example of ellipsis-truncation of multi-line text. |
| </div> |
| <div style="-webkit-line-clamp: 0;"> |
| 0 lines. This is an invalid value for -webkit-line-clamp. |
| </div> |
| <div style="-webkit-line-clamp: -1;"> |
| -1 lines. This is an invalid value for -webkit-line-clamp. |
| </div> |
| <div style="-webkit-line-clamp: -1%;"> |
| -1%. This is an invalid value for -webkit-line-clamp. |
| </div> |
| <div style="-webkit-line-clamp: 150%;"> |
| 150% truncation. This does the least truncation possible, truncating nothing. |
| </div> |
| </body> |
| </html> |
