How to realize the ellipsis effect of text overflow display in CSS

This article mainly introduces "how to achieve text overflow display ellipsis effect in CSS". In daily operation, I believe many people have doubts about how to achieve text overflow display ellipsis effect in CSS. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to achieve text overflow display ellipsis effect in CSS". Next, please follow the editor to study!

The text-overflow attribute indicates how the excess should be displayed when the text exceeds the element that contains it.

Written as text-overflow: clip | ellipsis

Attribute value description:

Clip: indicates that the text is trimmed, and the excess does not show ellipsis marks.

Ellipsis: indicates that the ellipsis mark (...) is displayed when the text overflows.

Note: text-overflow is only used to explain how to display the ellipsis in the event of text overflow. If you want to achieve the effect of displaying ellipsis in the event of overflow, you must also require the text to be displayed on one line (white-space:nowrap) and the overflow content to be hidden (overflow:hidden). Only in this way can you achieve the effect of displaying ellipsis in text overflow. The code is as follows:

Text-overflow:ellipsis

Overflow:hidden

White-space:nowrap

For example: life is not only the immediate, but also poetry and distant fields. You came to the world with your bare hands, desperate to find the sea. When this sentence goes beyond the prescribed range, give it a different effect. The code is as follows:

Div {border:1px solid # 0000X width: 300pxcontrol whitemurspace: nowrap;overflow: hidden;} .a1 {text-overflow: clip;} .a2 {text-overflow:ellipsis;} Life is not only in front of us, but also in poetry and distant fields. You came to the world with your bare hands, desperate to find the sea, not only the immediate life, but also poetry and distant fields. You came to the world with your bare hands, desperate to find the sea.

Effect picture:

As shown in the figure, the text-overflow: clip attribute used by the first div is truncated directly, that is, it is truncated wherever it overflows. The text-overflow:ellipsis used in the second div will add an ellipsis when its text overflows. in general, the overflow part will be set an ellipsis.

At this point, the study on "how to achieve the ellipsis effect of text overflow display in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!