HTML text Overflow

About overflow: 1, overflow attribute (container) Overflow:visible/hidden (hidden)/scroll/auto (auto)/inherit;visible: Default value, content will not be trimmed, will be outside the element box ; Hidden: Content is clipped, and the rest is not visible; Scroll: The content is trimmed, but the browser displays a scrollbar to see the rest; Auto: If the content is trimmed, the browser displays a scroll bar to see the rest of the content; Inherit: Specifies that the value of the overflow property should be inherited from the parent element.

2. Free space White-space:normal/pre/nowrap/pre-wrap/pre-line/inherit This property is used to set how to handle whitespace inside an element; Normal: Default, whitespace is ignored by the browser. Pre: The blank is reserved by the browser and behaves like the pre tag in HTML, nowrap: text does not wrap, text continues on the same line, until <br/> tag is encountered; Pre-wrap: preserves sequence of whitespace characters, but wraps normally ; Pre-line: Merges a sequence of whitespace characters, but preserves newline characters; inherit: Specifies that the value of the White-space property should be inherited from the parent element; (ie does not support this property value)

3, Text overflow: text-overflow:clip/ellipsis value: Clip: Do not display ellipsis (... ), but a simple cut; ellipsis: The ellipsis is displayed when the text inside the object overflows;

Description: The Text-overflow property is only ..., if the text overflow when the ellipsis is displayed, there is no other style attribute definition, to implement the effect of an ellipsis when overflow also need to define: 1, container width: width:value;2, force the text to display in one line: white-space:nowrap;3, overflow content is hidden: overflow:hidden;4, overflow text display ellipsis: text-overflow:ellipsis; &gt;      >&lt; <

HTML text Overflow