CSS content wrapping control in Web pages

In the DIVCSS layout, you need to control the text, to introduce to you, CSS control line-wrapping four kinds of properties.
First, White-space
You can implement the effect of the pre tag in HTML and the nowrap effect of the cell, and click here to see the sample.
Grammar:
White-space:normal | Pre | NoWrap
Take value:
Normal: Default value. The default processing method. Text is automatically processed for line wrapping. If you reach the container boundary, the content will go to the next line
Pre: newline and other whitespace characters will be protected. This value needs ie6+ or! DOCTYPE declared as Standards-compliant mode support. If! DOCTYPE declaration is not specified as Standards-compliant mode, this property is available, but does not work. The result is equivalent to normal. See Pre Object
NoWrap: Forces all text to be displayed in the same line until the text ends or the BR object is encountered. See NoWrap Properties
Description
Sets or retrieves how the space characters within an object are handled.
Whitespace characters, like newline, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can add a space by using a named entity that does not break the line space and use a BR element to add a newline. This property affects the content you use for the Document Object Model (DOM) operation as it does for IE display content.
This property acts on a block object.
Related styles:
Text-overflow
Use it in conjunction with White-space without having to write a program to determine the length of the string, click here to see the sample.
Grammar:
Text-overflow:clip | Ellipsis
Take value:
Clip: Default value. Do not display ellipsis (...), but simple trimming
Ellipsis: Displays an ellipsis (...) when text in an object overflows.
Description
Sets or retrieves whether an ellipsis (...) is used. Indicates an overflow of text within an object.
This property only acts on the horizontal inline direction of the ordinary Western text overflow. Inline overflow occurs when the text within a row exceeds the available width but does not have a newline opportunity.
To force an overflow to occur and to apply the ellipsis value, the author must set the White-space property value of the object to nowrap.
If there is no line-breaking opportunity (for example, the width of the object container is narrow and there are long lines of text without reasonable breaks), nowrap may overflow without application.
In order for the ellipsis value to be applied, this property must be set to an object with an unreachable region. The best option is to set the overflow property to hidden. This property is also applied when setting the overflow property to scroll or auto. But there will be scroll bars appearing.
By selecting an ellipsis, hidden text can be selected. When the selection occurs, the ellipsis is hidden and replaced by the text.
This property provides an efficient way to make an ellipsis tag in DHTML.
Second, Word-break
The most commonly used control line-wrapping properties, often used in conjunction with the following word-wrap, click here to see the sample.
Grammar:
Word-break:normal | Break-all | Keep-all
Take value:
Normal: Default value. Allow lines to be exchanged between words
Break-all: This behavior is the same as normal for Asian languages. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian text that contains some non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. Non-Asian text for small amounts of Asian text
Description
Sets or retrieves the word wrapping behavior within the text within an object. Especially when it comes to multiple languages.
For Chinese, you should use Break-all.
Third, Word-wrap
If you design a Web page is not adaptive width, you need to set it to Break-word, otherwise there may be a version of the fast staggered situation, click here to view the example.
Grammar:
Word-wrap:normal | Break-word
Take value:
Normal: Default value. Allow content to top open specified container boundary
Break-word: Content will wrap within the boundary. If necessary, word wrapping (Word-break) will also occur.
Description
Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container.
This property is used only for layout-like objects, such as block objects. Inline elements to use this attribute, you must first set the height or width property of the object, or set the Position property to absolute, or set the display property to block.
Four, overflow,overflow-x,overflow-y
This is not strictly the control of the line-wrapping style, but at some point it is set to hidden can complement the word-wrap, for example, you want to limit the width of only one line of text, and this line of text is longer than this width, combined with white-space+ Text-overflow can achieve better results, click here to see an example.
Grammar:
overflow:visible | Auto | Hidden | Scroll
Take value:
Visible: Default value. does not cut content nor does it add scroll bars. If you explicitly declare this default value, the object will be trimmed with the size of the window or frame that contains the object. and the Clip property setting will fail
Auto: Object content is trimmed or scroll bar is displayed when required
Hidden: Do not display content that exceeds the object size
Scroll: Always show scroll bars
Description
Retrieves or sets how content is managed when the content of the object exceeds its specified height and width.
The default value for all objects is visible, except that the default value for the TextArea object and the body object is auto. Setting the TextArea object This property value is hidden hides its scroll bar.
For table, if the Table-layout property is set to fixed, the TD object supports the overflow property with the default value of hidden. If set to scroll or auto, the content that exceeds TD size will be cut. If set to visible, it causes extra text to overflow to the right or left (depending on the direction property setting) cell.
This property is available on the Mac platform since IE5 started.
Since IE6 started, when you use! The DOCTYPE declaration specifies the standards-compliant mode, which can be applied to HTML objects.