Div CSS nowrap no line feed

Source: Internet
Author: User

For example, there are four Li in UL whose width is 210px, and the four Li's widths are 80px, 120px, 140px, and 80px according to their own content length.
The effect I need is that four Li nodes are automatically arranged to the left. When the sum of the length of the third Li and the first two li is greater than the width of UL, the third li moves down a row. In the second line. Instead of extending ul or increasing itself (content line feed and height increase)
The width of UL is defined as 210px and the width of Li is automatically defined. The result is:
Ul is not extended. Unfortunately, Li is not automatically arranged as below. Instead, the content is wrapped in a line feed, which increases Li. Then the first line of the dashboard was crowded ..
After careful consideration, I think the problem lies in the line feed of Li's internal content. So we looked for CSS attributes that disable line breaks.
I cannot find it online. I asked permanent daily and monthly questions in the Group to obtain the word-break attribute. Keep-all; Do not wrap ..
After being added to Li, I was surprised to find that the problem was solved.
During page debugging for the Working Group, it was pointed out that there was a problem.
As you can see, it does not change. It may be caused by the browser version.
I use IE7 and ff. They use IE6. I checked in DW and found that the word-break attribute is indeed not supported by IE6:
CSS attribute word-break is not supported by Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0

It's really depressing. This problem has plagued me before. It has never been solved.
Please advise if that friend has any good methods! Thank you very much.

The problem has been solved. That's ridiculous. Manually typed in DWCode.
I found a nowrap attribute. Isn't this nowrap word-braek? Can it avoid line breaks?
I tried it completely.
White-space: nowrap;
The DW test does not show a dotted line, which means there is no problem with browser support.
Save F12. The problem is solved. Haha...

By the way, write down the Syntax:

White-space: normal | pre | nowrap
Valid value:
Normal: default value. The default processing method. Text automatically processes line breaks. If the container boundary content arrives, it will go to the next line.
Pre: line breaks and other blank characters are protected. This value must be IE6 + or! Doctype is declared as Standards-compliant mode. If! The doctype declaration is not specified as Standards-compliant mode. This attribute can be used but does not work. The result is equivalent to normal. 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

set or retrieve the processing method of space characters in an object.
space characters, such as line breaks, spaces, and tabs, are ignored by default in HTML documents. When this attribute is set to normal or nowrap, you can add spaces by using a named entity that does not wrap spaces, and use the BR element to add line breaks. This attribute has the same impact on the content you operate on using the Document Object Model (DOM) as on the content displayed on IE.
This attribute acts on block objects.
This attribute is read-only for currentstyle objects. Other objects can be read and written.
the script feature is whitespace.
from: woria.cn

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.