& Lt; li & gt; & lt;/li & gt; the text displayed in the list is forced not to wrap, and is automatically hidden if it is greater than the li width.

Li {

Display: block;
Font-size: 14px;
Height: 16px;
Line-height: 16px;
Width: 330px;
White-space: nowrap; // force do not wrap
Overflow: hidden; // hide text automatically
Text-overflow: ellipsis; // Add ellipsis after hidden text
-O-text-overflow: ellipsis; // applicable to operabrowser
}

Syntax involving key attributes:

1. Syntax:
Text-overflow: clip | ellipsis
Parameters:
Clip: do not show the omitted mark (...), but simply crop
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)

2,
Syntax:
Overflow: visible | auto | hidden | scroll
Parameters:
Visible: Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object is cut to the size of the window or frame containing the object. And the clip attribute settings will be invalid.
Auto: the default value for the body object and textarea. Cut the content and add a scroll bar as needed
Hidden: Do not display content that exceeds the object size
Scroll: Always displays the scroll bar

3,
Syntax:
White-space: normal | pre | nowrap
Parameters:
Normal: the default processing method.
Pre: displays pre-formatted text in an equal-width font. Do not merge the blank distance between words and align the two ends. See pre object
Nowrap: forces all text to be displayed in the same row until the text ends or the br object is encountered. See nowrap attributes (features) of objects such as td and div)