How to use CSS to implement title text too long display ellipsis

This article mainly introduces the CSS implementation of the title text too long to display the ellipsis method, and to explain the single-line text overflow and multi-line text overflow situation, the need for friends can refer to the following

Previous time in the company's mobile station reconfiguration, encountered a product list title is required to display only two lines, and then more than two lines of characters with an ellipsis display. such as the effect, at that time the first feeling is that the demand can only be processed by the background output, or by the JS calculation characters, because the style can not control the text of the line break omitted, but because our new version of the mobile station is a flow layout, at different resolutions of the mobile phone line width is uncertain, So there is no standard number of characters to intercept the range. For example: 15 words on the iphone is displayed on two lines, but on the Samsung may not be two lines display, there may be a row of values, or at a lower resolution of the phone 15 words is already three lines, it is a headache to encounter this scene.
First, a single line of text wrapping:

A20 Banana Pi Development Board Module-deep Blue

CSS Code

. title{       width:150px;       height:25px;       line-height:25px;       Overflow:hidden;       Whitewhite-space:nowrap;       text-overflow:ellipsis;   }

Demo
The above code is a long-established standard single-line text overflow ellipsis, in a lot of scenarios I believe you may have used this kind of notation.
Multi-line display how to solve, after a Google, I found a chrome API can solve the above mentioned requirements-webkit-line-clamp, unfortunately this API is currently only chrome can support, And is not included in the standard fan, that is, later this function can only be used under Chrome, this is really a pity, but now the mobile is the WebKit kernel, so you can rest assured that the use of the above API, and then see the implementation of eg:

A20 Banana Pi Development Board Module-deep Blue

CSS Code

. title{       width:150px;       Overflow:hidden;       text-overflow:ellipsis;       Display:-webkit-box;       -webkit-line-clamp:2;       -webkit-box-orient:vertical;   }

Demo

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!