LayoutTests/fast/overflow/line-clamp.html

   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 to 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 text.<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 WebKit.  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-truncation 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, truncating nothing.
  44         </div>
  45     </body>
  46 </html>