div css nowrap without line breaks_Experience exchange

For example, there are 4 li's in a ul with a width of 210px. The widths of these 4 li's are 80px, 120px, 140px, and 80px according to their own content lengths.
The effect I need is that the four li's are automatically arranged to the left. When the sum of the lengths of the third li and the first two li is greater than the width of ul, the third li will move down one line. Displayed on the second line. Instead of making ul wider, or making itself taller (the content wraps and the height increases)
I defined the width of ul at 210px and the width of li automatically, and found that the result is:
ul is not stretched. It's a pity that li is not automatically arranged in the same order as the next one. Instead, the content is line-wrapped and the li is raised. Then shamelessly squeezed into the first row. .
After careful consideration, I believe that the problem lies in the line wrapping of the internal content of li. So I looked for the css attribute that prohibits line breaks.
I checked online and couldn’t find it. I asked Nagamu Riyue in the group and got the word-break attribute. keep-all; no line breaks. .
After adding it to li, I was surprised to find that the problem was solved.
When I was debugging the page for the work group, someone pointed out that there was a display problem.
When I walked over and took a look, the display did not change. I just thought it might be a browser version issue.
I am using IE7 and FF and they are using 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 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 frustrating, this problem has bothered me before. It has never been resolved.
That friend has any good methods, please give me some advice! Many thanks.


The problem has been solved. It's funny to say that. Type the code manually in DW.
I found nowrap in an attribute. Isn’t this nowrap from word-braek? Can it prevent line breaks?
With the mentality of giving it a try, I typed it in completely
white-space: nowrap;
There is no underline dotted line in the DW test, which means there is no problem with browser support.
Save F12. The problem is solved. hehe. . .


By the way, write down the syntax:

Syntax:
white-space : normal | pre | nowrap
Value:
normal : Default value. Default processing method. Text automatically handles line breaks. If the container boundary is reached, the content will go to the next line
pre : Newlines and other whitespace characters will be protected. This value requires IE6 or !DOCTYPE declared as standards-compliant mode support. If the !DOCTYPE declaration does not specify standards-compliant mode, this attribute can be used, but will have no effect. The result is equivalent to normal .See pre object
nowrap : Forces all text to be displayed on the same line until the end of the text or a br object is encountered. See noWrap attribute

Description:
Sets or retrieves the processing method of space characters within the object.
Space characters, such as line breaks, spaces, and TAB, are ignored by default in HTML documents. When this property is set to normal or nowrap , you can use named entities with no newlines to add spaces and br elements to add newlines. This property has the same effect on content you manipulate using the Document Object Model (DOM) as it does on content displayed by IE.
This property works on block objects.
This property is read-only for the currentStyle object. For other objects can be read and written.
The corresponding script feature is whiteSpace .
from:woria.cn