How to Truncate Text on the Second Line with CSS?

CSS Truncation on the Second Line: A Detailed Solution

Achieving text truncation on the second line using CSS can be a challenge that lacks clear documentation online. This article provides a step-by-step solution to help you overcome this obstacle.

The objective is to display an ellipsis (...) at the end of the second line of a text, instead of the entire text overflowing onto a third line.

To achieve this effect, we utilize specific CSS properties:

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

These properties work in conjunction as follows:

• overflow: hidden keeps the text within the defined area.
• text-overflow: ellipsis adds the ellipsis if the text exceeds the available space.
• display: -webkit-box and -webkit-line-clamp: 3 ensure that the text wraps to multiple lines but is limited to three lines.
• -webkit-box-orient: vertical orients the lines vertically.

Note that this solution is only fully supported in WebKit browsers, such as Chrome and Safari. Other browsers may require different approaches or may not support text truncation on the second line explicitly.

The above is the detailed content of How to Truncate Text on the Second Line with CSS?. For more information, please follow other related articles on the PHP Chinese website!