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

  Zhanhailiang Date: 2014-10-24

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 {width:200px;    Overflow:hidden;    Text-overflow:ellipsis;    -o-text-overflow:ellipsis;    -webkit-text-overflow:ellipsis;    -moz-text-overflow:ellipsis; White-space:nowrap;}.    Text2 {width:200px;    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 (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>

Such as:

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