When the css exceeds the limit, the ellipsis is displayed. If the css exceeds the limit, the ellipsis is displayed.

When the css exceeds the limit, the ellipsis is displayed. If the css exceeds the limit, the ellipsis is displayed.

Code: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

Key code: text-overflow: ellipsis;

Explanation: Simply put, I want to limit the text to one line (white-space: nowrap;). It must be a restricted line (width ), in addition, the overflow part should be hidden (overflow: hidden;), and then the ellipsis (text-overflow: ellipsis) will appear ).

Text-ellipsis is a special style. The interpretation is as follows: the text-overflow attribute is only an annotation, and whether the omitted mark is displayed when the text overflows. Does not have other style attribute definitions. To achieve the effect of skipping numbers during overflow, you must also define: to force the text to be displayed (white-space: nowrap) in a row and to hide the overflow content (overflow: hidden ), only in this way can the overflow text display effect be achieved.

Code:

<! DOCTYPE html>  

Appendix: white-space: nowrap; http://www.w3cschool.cn/pr_text_white-space.html
Text-overflow: ellipsis; http://www.w3chtml.com/css3/properties/text/text-overflow.html

Css enables fixed box width and automatic height. The maximum height is exceeded and the ellipsis is hidden.
White-space: nowrap; indicates that the text will not wrap, and the text will continue on the same line until the <br> label is encountered.
You don't have to wrap the line. What is the purpose of setting the height...
 
This method is only applicable to the effect of ellipsis when a single line of text overflows.
Multi-Line Text overflow with JS

How does dreamweaver display excessive texts with ellipsis?
<! DOCTYPE html>