CSS3 How to implement an ellipsis display effect beyond the specified text

Not to do the front-end for a long time, today from the refactoring to understand that CSS3 has been able to achieve a lot of the past must be achieved through JS, such as gradients, shadows, automatic truncation of text display ellipsis and other powerful effects, and these features are maturing, has been used in a large number of production environments. The H5 is really maturing, and has to be made up of evil.

The following share implements the demo of the specified text beyond the ellipsis display:

<style>. Text1 {Width200px;Overflow:hidden;Text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;White-space:nowrap;}. text2 {Width200px;Word-break:break-all;Display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;Overflow:hidden;}</style><Div Class="Text1"> Hot Picks: From sub-channel (Dress shoes bag, parent-child, home, Beauty) in the selection, the inventory of more than 30% of the high-priced products list, the number of 50</Div><BR     />  <div     class = "Text2"  > Hot Picks: From sub-channel (Apparel 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 << Span class= "sy0" >/div    >          

Such as:

Article Share from PHP Chinese web, original address: http://www.php.cn/css-tutorial-360314.html

CSS3 How to implement an ellipsis display effect beyond the specified text