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

CSS ellipsis on Second Line: Is it Feasible?

In CSS, text-overflow: ellipsis is widely used to indicate truncated text with an ellipsis (...). However, implementing ellipsis on the second line of a multi-line text block has long been a challenge.

To achieve this effect, rather than relying on text-overflow, one can consider using the -webkit-line-clamp property. This property limits the number of lines displayed within a block container. By combining it with display: -webkit-box and -webkit-box-orient: vertical, you can constrain the text to a specific number of lines. To ensure clipping, overflow: hidden is recommended.

The following code snippet exemplifies this approach:

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

This technique utilizes -webkit prefixes, making it compatible with webkit browsers. However, it's worth noting that support for this specific combination may vary across different browser versions.

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