An introduction to how to use CSS to display ellipsis in the title text that is too long

This article mainly introduces the method of using CSS to display ellipsis in the long part of the title text, and explains the situation of single-line text overflow and multi-line text overflow. Friends who need it can refer to it. Some time ago, during the reconstruction of the company's mobile site, we encountered the requirement that the title of a product list should only display two lines, and then characters exceeding two lines should be displayed with ellipses. As shown in the picture below, the first impression at the time was that this requirement can only be processed by intercepting characters during background output, or by calculating characters through JS, because the style cannot control the omission of line-wrapped text, but because our new version of the mobile site is a flow For layouts, the width of line breaks on mobile phones under different resolutions is uncertain, so there is no standard range for the number of characters to intercept. For example: 15 characters are displayed on two lines on an iPhone, but on a Samsung it may not be displayed on two lines. It may be displayed on one line, or on a phone with a lower resolution, 15 characters are already displayed on three lines. It's a headache when this happens.
Let’s review first, how to write line breaks in a single line of text:

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-standing standard single-line text overflow ellipsis writing method. In many scenarios, I believe everyone may have used this writing method.

How to solve the problem of multi-line display? After some googling, I found an API of chrome that can solve the above mentioned needs - webkit-line-clamp. Unfortunately, this API Currently, only chrome can support it, and it is not included in the W3C standard. This means that in the future, this function will only be available under chrome. This is really a pity, but now all mobile terminals use webkit. kernel, so you can use the above API with confidence, then let’s take a look at the implementation 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;   
}

The above is the detailed content of An introduction to how to use CSS to display ellipsis in the title text that is too long. For more information, please follow other related articles on the PHP Chinese website!