Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to display css text too long". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The text is too long to display with an ellipsis: 1. Add the "overflow:hidden;" style to the text element to hide the excess of the text; 2. Add the "text-overflow:ellipsis;" style to the text element to hide the text with the ellipsis "." It can be expressed.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css text is too long to use. The method of display

1. Use the CSS overflow attribute to control the addition of scroll bars in the corresponding element range when the content overflows the element box.

When the value of the overflow property is hidden, the content is trimmed and the rest is invisible.

Examples are as follows:

Div {white-space:nowrap; width:12em; overflow:hidden; border:1px solid # 000000;} This is some long text that will not fit in the box

Output result:

At this time, the extra text is cut, and you can't lose the text-overflow attribute if you want the extra text to be indicated by ellipsis.

2. In css, we can use the text-overflow attribute to specify what happens when a text overflow contains an element.

The syntax for the text-overflow attribute is:

Text-overflow: clip | ellipsis | string

Among them, it should be noted that:

Clip means trimmed text.

Ellipsis indicates that an ellipsis is displayed to represent the trimmed text.

String means to use a given string to represent the trimmed text.

So I want to use the extra words. Show that you only need to add a "text-overflow:ellipsis" style to the text element, as shown in the following example:

Div {white-space:nowrap; width:12em; overflow:hidden; border:1px solid # 000000; text-overflow:ellipsis;} This is some long text that will not fit in the box

Output result:

This is the end of the content of "how to display css text too long". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.