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 |