summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/overflow/line-clamp.html
blob: d16540dbb80cb08820917219840b47b0296fcf68 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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>