How to use CSS3 to realize single-line text overflow and multi-line text overflow

This article mainly introduces how to use CSS3 to achieve single-line text spillover and multi-line text spillover related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use CSS3 to achieve single-line text spillover and multi-line text spillover article will have a harvest, let's take a look.

Text overflow is divided into:

1. Single-line text overflow is often used for article list titles.

Overflow:hidden

White-space:nowrop

Text-overflow:ellipsis

The effect achieved is:

two。 Multi-line text overflow is often used for detailed introduction of article list.

Overflow: hidden

Text-overflow: ellipsis

Display:-webkit-box

-webkit-line-clamp: 2

-webkit-box-orient: vertical

Realized effect: (this is for mobile)

This is the end of the article on "how to use CSS3 to achieve single-line text overflow and multi-line text overflow". Thank you for reading! I believe that everyone has a certain understanding of "how to use CSS3 to achieve single-line text spillover and multi-line text spillover" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.