CSS to prevent the Li-line under the UL (Li beyond the width into ...) Code

Source: Internet
Author: User
Tags dashed line object model

A problem was encountered when using CSS to combine div layouts.
In a specified width of UL inside I define the width of Li as automatic. An attempt was made to align Li from the left-aligned content length.
For example, the width of 210px ul has 4 Li, the width of the 4 Li, according to their own content length of 80px, 120px, 140px, 80px.
The effect I need is 4 Li automatically arranged to the left. When the length of the third Li and the first two Li is greater than the width of the UL, the third Li moves down one line. Shown on the second line. Instead of the UL width, or to self-supporting (content line, height increase)
respectively, the width of the UL 210px and the width of Li are defined automatically, and the results are as follows:
UL has not been extended, but Li also did not automatically to the next arrangement. Instead of wrapping up the content, Li is propped up. Then the Sipilailian squeezed in the first line.
After careful consideration, it is thought that the problem is within Li's internal content wrapping. Then look for CSS properties that prohibit line wrapping.
I didn't find it on the Internet. Asked the group of Eternal eyes and moon, get word-break this attribute. Keep-all: No line break.
Added to Li after the surprise found that the problem solved.
For the team to do page debugging when it was pointed out that the problem is displayed.
Go and see, the show does not change. I thought it might be a browser version issue.
I'm using IE7 and FF, the IE6 they used. Check it out in the DW. Discover Word-break This property is really not supported by IE6:
CSS Properties Word-break is not supported by Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, N Etscape Navigator 6.0, Netscape Navigator 7.0

It's really depressing, and this problem has been bothering me before. has not been resolved.
The friend has any good method, please advise. greatly appreciated.

—————————-I'm a split line ————————————

The problem has been resolved. It's ridiculous. You manually tap the code in the DW.
Found a property in the nowrap, this nowrap is not word-braek. Is it possible to not break the line.
I'm just trying to hold on to it.
White-space:nowrap;
The DW test did not appear with a dashed line, meaning there is no problem with browser support.
Save F12. The problem is solved. Oh...
By the way write down the syntax:

Grammar:
White-space:normal | Pre | NoWrap
Value:
Normal: Default value. The default processing mode. Text automatically handles line breaks. If you arrive at the container boundary, the content will go to the next line
Pre: line breaks and other whitespace characters will be protected. This value requires ie6+ or! DOCTYPE statement for Standards-compliant mode support. If! The DOCTYPE declaration is not specified as Standards-compliant mode, and this property can be used but does not work. The result is equal to normal. See Pre objects
NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object. See NoWrap Properties

Description
Sets or retrieves how white space characters are handled within an object.
Whitespace characters, like line breaks, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can use a named entity that does not wrap spaces to add spaces and add line breaks with a BR element. The effect of this property on the content of your use of the Document Object Model (DOM) operation is the same as its effect on the content of IE display.
This property acts on the Block object.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is whitespace.
Beyond Hidden

li{
Display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
White-space:nowrap; Force No Line break
Overflow:hidden; Automatically hide text
Text-overflow:ellipsis; Add ellipses after text is hidden
-o-text-overflow:ellipsis; For Opera browser
}

Syntax that involves key attributes:

1. Syntax:
Text-overflow:clip | Ellipsis
Parameters:
Clip: Do not display the ellipsis tag (...). ), but a simple cut
Ellipsis: Displays ellipsis (...) when text inside an object overflows. )

2.
Grammar:
overflow:visible | Auto | Hidden | Scroll
Parameters:
Visible: Do not cut content or add scroll bars. If this default value is explicitly declared, the object is clipped to the size of the window or frame that contains the object. and the Clip property setting is invalidated
Auto: This is the default value for the body object and textarea. Cut content and add scroll bars when needed
Hidden: Do not display content beyond the object size
Scroll: Always show scroll bars

3,
Syntax:
White-space:normal | pre | nowrap
Parameter:
Normal: Default processing
Pre: Displays preformatted text in equal-width font. Do not combine whitespace distances between words and justify them. See Pre Object
NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object. See NoWrap Properties (attributes) for objects such as Td,div

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.