W3cubDocs

/Support Tables

CSS line-clamp

Proprietary and undocumented 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://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-WebKit_SpecificUnsupportedProperties
Status Unofficial / Note
IE Edge Firefox Chrome Safari Opera
      73 (*)    
    65 72 (*)    
    64 71 (*) TP (*)  
11 18 (1) 63 70 (*) 12 (*) 56 (*)
10 17 (1) 62 69 (*) 11.1 (*) 55 (*)
9 16 61 68 (*) 11 (*) 54 (*)
8 15 60 67 (*) 10.1 (*) 53 (*)
Show all
7 14 59 66 (*) 10 (*) 52 (*)
6 13 58 65 (*) 9.1 (*) 51 (*)
5.5 12 57 64 (*) 9 (*) 50 (*)
    56 63 (*) 8 (*) 49 (*)
    55 62 (*) 7.1 (*) 48 (*)
    54 61 (*) 7 (*) 47 (*)
    53 60 (*) 6.1 (*) 46 (*)
    52 59 (*) 6 (*) 45 (*)
    51 58 (*) 5.1 (*) 44 (*)
    50 57 (*) 5 (*) 43 (*)
    49 56 (*) 4 42 (*)
    48 55 (*) 3.2 41 (*)
    47 54 (*) 3.1 40 (*)
    46 53 (*)   39 (*)
    45 52 (*)   38 (*)
    44 51 (*)   37 (*)
    43 50 (*)   36 (*)
    42 49 (*)   35 (*)
    41 48 (*)   34 (*)
    40 47 (*)   33 (*)
    39 46 (*)   32 (*)
    38 45 (*)   31 (*)
    37 44 (*)   30 (*)
    36 43 (*)   29 (*)
    35 42 (*)   28 (*)
    34 41 (*)   27 (*)
    33 40 (*)   26 (*)
    32 39 (*)   25 (*)
    31 38 (*)   24 (*)
    30 37 (*)   23 (*)
    29 36 (*)   22 (*)
    28 35 (*)   21 (*)
    27 34 (*)   20 (*)
    26 33 (*)   19 (*)
    25 32 (*)   18 (*)
    24 31 (*)   17 (*)
    23 30 (*)   16 (*)
    22 29 (*)   15 (*)
    21 28 (*)   12.1
    20 27 (*)   12
    19 26 (*)   11.6
    18 25 (*)   11.5
    17 24 (*)   11.1
    16 23 (*)   11
    15 22 (*)   10.6
    14 21 (*)   10.5
    13 20 (*)   10.0-10.1
    12 19 (*)   9.5-9.6
    11 18 (*)   9
    10 17 (*)    
    9 16 (*)    
    8 15 (*)    
    7 14 (*)    
    6 13    
    5 12    
    4 11    
    3.6 10    
    3.5 9    
    3 8    
    2 7    
      6    
      5    
      4    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 (*) all 67 (*) 10 (*) 46 (*) 70 (*) 63 11 11.8 (*) 7.2 (*) 1.2 (*) 7.12 (*)
11.3-11.4 (*)   4.4.3-4.4.4 (*) 7 (*) 12.1     10   6.2 (*)    
11.0-11.2 (*)   4.4 (*)   12         5 (*)    
10.3 (*)   4.2-4.3 (*)   11.5         4 (*)    
Show all
10.0-10.2 (*)   4.1 (*)   11.1              
9.3 (*)   4 (*)   11              
9.0-9.2 (*)   3 (*)   10              
8.1-8.4 (*)   2.3 (*)                  
8 (*)   2.2                  
7.0-7.1 (*)   2.1                  
6.0-6.1 (*)                      
5.0-5.1 (*)                      
4.2-4.3                      
4.0-4.1                      
3.2                      

Notes

As there is no specification and the property is dependent on an outdated implementation of flexbox (hence display: -webkit-box) it is unlikely that other browsers will support the property as-is, although an alternative solution may at some point replace it.

Older (presto-based) versions of the Opera browser have also supported the same effect using the proprietary -o-ellipsis-lastline; value for text-overflow.

  1. Supported in MS Edge with -webkit- prefix only (not with -ms-)

* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-line-clamp