Using CSS3 to implement a specified number of lines and ellipses in a text

<style>.text1{
/* Single line */
width:200px;Overflow:Hidden;Text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;White-space:nowrap;}. Text2{
/* Multiple lines */
width:200px;Word-break:Break-all;Display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:Vertical;Overflow:Hidden;}</style>

<class= "Text1"> Hot Picks: from sub-channel (Dress shoes bag, parent-child, home, Beauty) in the selection, inventory more than 30% The high price of the product list, the number is 50 </div><class= "Text2"  > Hot Picks: from sub-channel (Dress shoes bag, parent-child, home, Beauty) in the selection, the inventory is more than 30% of the high price of the product list, the number of 50 </Div >

Using CSS3 to implement a specified number of lines and ellipses in a text