Can CSS Create an Ellipsis Only on the Second Line of Text?

Achieving CSS ellipsis on the Second Line

The question arises: Can CSS text-overflow: ellipsis be applied specifically to the second line of text? A meticulous search has yielded no viable solution. Let's explore an alternative approach:

WebKit Browser Solution:

The following CSS code targets WebKit browsers and effectively produces an ellipsis on the second line:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Understanding the Code:

• overflow: hidden prevents any overflow outside the container area.
• text-overflow: ellipsis triggers the ellipsis on truncation.
• display: -webkit-box and -webkit-box-orient: vertical enable the -webkit-line-clamp property to function.
• -webkit-line-clamp: 3 specifies that a maximum of three lines will be displayed, effectively restricting the ellipsis to the second line.

The above is the detailed content of Can CSS Create an Ellipsis Only on the Second Line of Text?. For more information, please follow other related articles on the PHP Chinese website!