CSS property that will contain text to a given amount of lines when used in combination with display: -webkit-box
. It will end with ellipsis when text-overflow: ellipsis
is included.
Spec | https://w3c.github.io/csswg-drafts/css-overflow-3/#propdef--webkit-line-clamp |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
108 (*) | |||||
107 (*) | 107 (*) | TP (*) | |||
106 (*) | 106 (*) | 16.1 (*) | |||
11 | 105 (*) | 105 (*) | 105 (*) | 16.0 (*) | 91 (*) |
10 | 104 (*) | 104 (*) | 104 (*) | 15.6 (*) | 90 (*) |
9 | 103 (*) | 103 (*) | 103 (*) | 15.5 (*) | 89 (*) |
8 | 102 (*) | 102 (*) | 102 (*) | 15.4 (*) | 88 (*) |
Show all | |||||
7 | 101 (*) | 101 (*) | 101 (*) | 15.2-15.3 (*) | 87 (*) |
6 | 100 (*) | 100 (*) | 100 (*) | 15.1 (*) | 86 (*) |
5.5 | 99 (*) | 99 (*) | 99 (*) | 15 (*) | 85 (*) |
98 (*) | 98 (*) | 98 (*) | 14.1 (*) | 84 (*) | |
97 (*) | 97 (*) | 97 (*) | 14 (*) | 83 (*) | |
96 (*) | 96 (*) | 96 (*) | 13.1 (*) | 82 (*) | |
95 (*) | 95 (*) | 95 (*) | 13 (*) | 81 (*) | |
94 (*) | 94 (*) | 94 (*) | 12.1 (*) | 80 (*) | |
93 (*) | 93 (*) | 93 (*) | 12 (*) | 79 (*) | |
92 (*) | 92 (*) | 92 (*) | 11.1 (*) | 78 (*) | |
91 (*) | 91 (*) | 91 (*) | 11 (*) | 77 (*) | |
90 (*) | 90 (*) | 90 (*) | 10.1 (*) | 76 (*) | |
89 (*) | 89 (*) | 89 (*) | 10 (*) | 75 (*) | |
88 (*) | 88 (*) | 88 (*) | 9.1 (*) | 74 (*) | |
87 (*) | 87 (*) | 87 (*) | 9 (*) | 73 (*) | |
86 (*) | 86 (*) | 86 (*) | 8 (*) | 72 (*) | |
85 (*) | 85 (*) | 85 (*) | 7.1 (*) | 71 (*) | |
84 (*) | 84 (*) | 84 (*) | 7 (*) | 70 (*) | |
83 (*) | 83 (*) | 83 (*) | 6.1 (*) | 69 (*) | |
81 (*) | 82 (*) | 81 (*) | 6 (*) | 68 (*) | |
80 (*) | 81 (*) | 80 (*) | 5.1 (*) | 67 (*) | |
79 (*) | 80 (*) | 79 (*) | 5 (*) | 66 (*) | |
18 (1) | 79 (*) | 78 (*) | 4 | 65 (*) | |
17 (1) | 78 (*) | 77 (*) | 3.2 | 64 (*) | |
16 | 77 (*) | 76 (*) | 3.1 | 63 (*) | |
15 | 76 (*) | 75 (*) | 62 (*) | ||
14 | 75 (*) | 74 (*) | 60 (*) | ||
13 | 74 (*) | 73 (*) | 58 (*) | ||
12 | 73 (*) | 72 (*) | 57 (*) | ||
72 (*) | 71 (*) | 56 (*) | |||
71 (*) | 70 (*) | 55 (*) | |||
70 (*) | 69 (*) | 54 (*) | |||
69 (*) | 68 (*) | 53 (*) | |||
68 (*) | 67 (*) | 52 (*) | |||
67 | 66 (*) | 51 (*) | |||
66 | 65 (*) | 50 (*) | |||
65 | 64 (*) | 49 (*) | |||
64 | 63 (*) | 48 (*) | |||
63 | 62 (*) | 47 (*) | |||
62 | 61 (*) | 46 (*) | |||
61 | 60 (*) | 45 (*) | |||
60 | 59 (*) | 44 (*) | |||
59 | 58 (*) | 43 (*) | |||
58 | 57 (*) | 42 (*) | |||
57 | 56 (*) | 41 (*) | |||
56 | 55 (*) | 40 (*) | |||
55 | 54 (*) | 39 (*) | |||
54 | 53 (*) | 38 (*) | |||
53 | 52 (*) | 37 (*) | |||
52 | 51 (*) | 36 (*) | |||
51 | 50 (*) | 35 (*) | |||
50 | 49 (*) | 34 (*) | |||
49 | 48 (*) | 33 (*) | |||
48 | 47 (*) | 32 (*) | |||
47 | 46 (*) | 31 (*) | |||
46 | 45 (*) | 30 (*) | |||
45 | 44 (*) | 29 (*) | |||
44 | 43 (*) | 28 (*) | |||
43 | 42 (*) | 27 (*) | |||
42 | 41 (*) | 26 (*) | |||
41 | 40 (*) | 25 (*) | |||
40 | 39 (*) | 24 (*) | |||
39 | 38 (*) | 23 (*) | |||
38 | 37 (*) | 22 (*) | |||
37 | 36 (*) | 21 (*) | |||
36 | 35 (*) | 20 (*) | |||
35 | 34 (*) | 19 (*) | |||
34 | 33 (*) | 18 (*) | |||
33 | 32 (*) | 17 (*) | |||
32 | 31 (*) | 16 (*) | |||
31 | 30 (*) | 15 (*) | |||
30 | 29 (*) | 12.1 | |||
29 | 28 (*) | 12 | |||
28 | 27 (*) | 11.6 | |||
27 | 26 (*) | 11.5 | |||
26 | 25 (*) | 11.1 | |||
25 | 24 (*) | 11 | |||
24 | 23 (*) | 10.6 | |||
23 | 22 (*) | 10.5 | |||
22 | 21 (*) | 10.0-10.1 | |||
21 | 20 (*) | 9.5-9.6 | |||
20 | 19 (*) | 9 | |||
19 | 18 (*) | ||||
18 | 17 (*) | ||||
17 | 16 (*) | ||||
16 | 15 (*) | ||||
15 | 14 (*) | ||||
14 | 13 | ||||
13 | 12 | ||||
12 | 11 | ||||
11 | 10 | ||||
10 | 9 | ||||
9 | 8 | ||||
8 | 7 | ||||
7 | 6 | ||||
6 | 5 | ||||
5 | 4 | ||||
4 | |||||
3.6 | |||||
3.5 | |||||
3 | |||||
2 |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
16.1 (*) | ||||||||||||
16.0 (*) | all | 105 (*) | 10 (*) | 64 (*) | 105 (*) | 104 (*) | 11 | 13.4 (*) | 18.0 (*) | 13.1 (*) | 13.18 (*) | 2.5 |
15.6 (*) | 4.4.3-4.4.4 (*) | 7 (*) | 12.1 | 10 | 17.0 (*) | |||||||
15.5 (*) | 4.4 (*) | 12 | 16.0 (*) | |||||||||
15.4 (*) | 4.2-4.3 (*) | 11.5 | 15.0 (*) | |||||||||
Show all | ||||||||||||
15.2-15.3 (*) | 4.1 (*) | 11.1 | 14.0 (*) | |||||||||
15.0-15.1 (*) | 4 (*) | 11 | 13.0 (*) | |||||||||
14.5-14.8 (*) | 3 (*) | 10 | 12.0 (*) | |||||||||
14.0-14.4 (*) | 2.3 (*) | 11.1-11.2 (*) | ||||||||||
13.4-13.7 (*) | 2.2 | 10.1 (*) | ||||||||||
13.3 (*) | 2.1 | 9.2 (*) | ||||||||||
13.2 (*) | 8.2 (*) | |||||||||||
13.0-13.1 (*) | 7.2-7.4 (*) | |||||||||||
12.2-12.5 (*) | 6.2-6.4 (*) | |||||||||||
12.0-12.1 (*) | 5.0-5.4 (*) | |||||||||||
11.3-11.4 (*) | 4 (*) | |||||||||||
11.0-11.2 (*) | ||||||||||||
10.3 (*) | ||||||||||||
10.0-10.2 (*) | ||||||||||||
9.3 (*) | ||||||||||||
9.0-9.2 (*) | ||||||||||||
8.1-8.4 (*) | ||||||||||||
8 (*) | ||||||||||||
7.0-7.1 (*) | ||||||||||||
6.0-6.1 (*) | ||||||||||||
5.0-5.1 (*) | ||||||||||||
4.2-4.3 | ||||||||||||
4.0-4.1 | ||||||||||||
3.2 |
Older (presto-based) versions of the Opera browser have also supported the same effect using the proprietary -o-ellipsis-lastline;
value for text-overflow
.
Supported in MS Edge with -webkit-
prefix only (not with -ms-
)
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-line-clamp