How to set text beyond the ellipses in css

Method: First use the "overflow:hidden" statement to set the content to be hidden after it exceeds the limit; then use the "text-overflow:ellipsis" statement to set the content to be displayed as an ellipsis when it exceeds the limit; finally use "white-space:nowrap" statement, just set the text without line breaks.

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

Create a new html page, find the

tag on the html code page, create a

tag in the

tag, then enter the displayed content and add a class class as class= "cont". Find the

订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

Copy after login

Save the code, use a browser to open the html file to view the effect, and find that the content is not hidden because the height of the content is not set.

Set the content to be displayed as one line. When the content exceeds, it will be displayed as an ellipsis. Adding content to the cont class is displayed as one line: white-space: nowrap;, and the content after it exceeds is displayed as an ellipsis: text-overflow: ellipsis; (Note: white-space: nowrap; and text-overflow: ellipsis; must be used at the same time to be displayed. is an ellipsis).

After saving the code, use a browser to open it to see the effect of the content being displayed as an ellipsis after it exceeds the limit.

Recommended learning: css video tutorial

The above is the detailed content of How to set text beyond the ellipses in css. For more information, please follow other related articles on the PHP Chinese website!