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

This article mainly introduces "how to realize the automatic hiding of the text in the ul li list which is forced not to wrap the text greater than the width of the li". In the daily operation, I believe that many people have doubts about how to realize the automatic hiding of the text in the ul li list which is forced not to wrap the text greater than the width of the li. The editor consulted all kinds of materials and sorted out a simple and useful method of operation. I hope it will be helpful for you to answer the question of "how to realize that the text displayed in the ul li list is forced not to wrap the text that is larger than the width of the li". Next, please follow the editor to study!

The code is as follows:

Li {

Display:block

Font-size:14px

Height:16px

Line-height:16px

Width:330px

White-space:nowrap; / / forcibly do not wrap

Overflow:hidden; / / automatically hide text

Text-overflow: ellipsis; / / add ellipses after text is hidden

-opera text overflow information; / / applicable to the browser

}

Syntax involving key attributes:

1. Grammar:

Text-overflow: clip | ellipsis

Parameters:

Clip: does not show ellipsis marks (...), but simple trimming

Ellipsis: displays the ellipsis mark (...) when text overflows within an object.

2 、

Syntax:

Overflow: visible | auto | hidden | scroll

Parameters:

Visible: do not cut the content or add scroll bars. If you explicitly declare this default value, the object will be cut to the size of the window or frame that contains the object. And the clip property setting will be invalidated

Auto: this is the default value for body objects and textarea. Cut the content and add scroll bars as needed

Hidden: does not display content that exceeds the object size

Scroll: always show scroll bar

3 、

Syntax:

White-space: normal | pre | nowrap

Parameters:

Normal: default handling method

Pre: displays preformatted text in an equal width font. Do not merge the white space between words and align both ends. See pre object

Nowrap: forces all text to be displayed on the same line until the text ends or encounters a br object. See nowrap properties (properties) of objects such as td,div

At this point, on the "how to achieve the ul li list of text display text forced not to wrap more than the li width of the text automatically hidden" study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.