How to use CSS to display ellipsis in the title text that is too long

This article mainly introduces the CSS method 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 streaming 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, the way to write line breaks in a single line of text:

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 has been around for a long time The standard single-line text overflowing ellipses is written 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 is currently only supported by chrome. And it is not included in the standard scope of W3C, which means that this function can only be used under chrome in the future. This is really a pity, but now the mobile terminals all use the kernel of webkit, so you can rest assured Using the above API, let’s take a look at the implementation 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

That’s it for this article The entire content, I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use CSS to realize automatic line wrapping of pure English numbers

How to use CSS to maintain the width of page content Gao Bi

The above is the detailed content of 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!