-webkit-line-clamp multi-line text overflow ...

CSS code:

.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

HTML code:

<div class="box">
     Multi-line text multi-line text overflow overflow overflow multi-line text multi-line text multi-line text overflow overflow overflow multi-line text multi-line text multi-line text overflow overflow
</div>

effect:

 Multi-line text multi-line text overflow overflow overflow multi-line text multi-line text overflow
 Multi-line text multi-line text overflow overflow overflow multi-line text multi-line text overflow ...

 

Second, understanding

Note: -webkit-line-clamp is webkit private property is property (unsupported WebKit property) a non-standard, it does not appear in the draft CSS specifications.

        The number of rows -webkit-line-clamp block for limiting a text element displayed. To achieve this effect, it requires a combination of other properties WebKit. Common combination of attributes:

         display: -webkit-box; have binding properties, as the elastically stretchable object model display box.

        -webkit-box-orient the necessary binding properties, set or retrieve a telescopic arrangement of the object sub-element cassette.

Extension: single line of text codes overflow ellipsis ...

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap