Introduce the method of using CSS to display the ellipsis in the long section of title text

This article mainly introduces the use of CSS to implement the title text too long part of the way to display the ellipsis, and to explain the single-line text overflow and multiple lines of text overflow situation, the need for friends can refer to the previous period of time in the company's mobile station reconstruction, encountered a product list title of the need to display only two lines, Then more than two lines of characters are displayed with ellipses. 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:

The code is as follows:

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;   }

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:

The code is as follows:

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;   }