CSS line-wrapping control in Web pages

In the Divcss layout, the text needs to be controlled, to introduce you to the CSS control of the four kinds of line-wrapping properties.
First, White-space
You can implement the effect of the pre tag in HTML and the nowrap effect of the cell.
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.
Related styles:
Text-overflow
Using it in conjunction with White-space, you don't have to write the program to determine the length of the string.
Grammar:
Text-overflow:clip | Ellipsis
Value:
Clip: Default value. The ellipsis (...) is not displayed, but is simply trimmed
Ellipsis: Display ellipsis (...) when text inside an object overflows
Description
Sets or retrieves whether an ellipsis tag (...) is used.Indicates an overflow of text within an object.
This property only acts on the horizontal inline direction, and the overflow of ordinary Western text. Inline overflow occurs when the text in the row exceeds the available width but there is no line break.
To force an overflow to occur and apply the ellipsis value, the author must set the object's White-space property value to nowrap.
If there is no line break (for example, the object container'sThe width is narrow, and there is a long text without a reasonable break, and there is no application nowrap can overflow.
For the ellipsis value to be applied, this property must be set to an object that has a non-visual area. The best option is to set the overflow property to hidden. Set the overflow property to scroll orAuto, this property is also applied. But there will be a scroll bar appearing.
By selecting the ellipsis tag, the 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 ellipsis tags in DHTML.
Second, Word-break
The most commonly used control wrap property, often used in conjunction with the following word-wrap.
Grammar:
Word-break:normal | Break-all | Keep-all
Value:
Normal: Default value. Allow line breaks between words
Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. 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 break is not allowed. Suitable for non-Asian texts containing small amounts of Asian text
Description
Sets or retrieves the word wrapping behavior of text within an object. Especially when multiple languages are present.
ForChinese, should use Break-all.
Third, Word-wrap
If youThe design of the Web page is not self-adaptingwidth, you need to set it to Break-word, or the version may be staggered, click here to see the example.
Grammar:
Word-wrap:normal | Break-word
Value:
Normal: Default value. Allow content to top open specified container boundaries
Break-word: Content will be wrapped 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 objects that have layout, such as block objects. To use this property with inline features, you must first set the height or width property of the object, or set the Position property to absolute, or set the display property toBlock.
Iv. overflow,overflow-x,overflow-y
This is not strictly the meaning of the control wrap style, but at some point it is set to hidden can supplement word-wrap, for example, you want to limit the width of only one line of text, and this line of text is more than the length of the width, combined with white-space+ The text-overflow can achieve better results.
Grammar:
overflow:visible | Auto | Hidden | Scroll
Value:
Visible: Default value. Do not cut content or add scroll bars. If this default value is explicitly declared, the object is trimmed with the dimensions of the window or frame that contains the object. and the Clip property setting is invalidated
Auto: Object content is cropped or displayed when required
Hidden: Do not display content beyond the object size
Scroll: Always show scroll bars
Description
Retrieves or sets how content is managed when the object's content 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 with this property value of hidden hides its scroll bar.
For table, if the Table-layout property is set to fixed, the TD object supports a overflow property with a default value of hidden. If set to scroll or auto, then the content beyond the TD size will be clipped. If set to visible, causes additional text to overflow to the right or left (depending on the direction property setting) of the cell.
This property is available on the Mac platform from IE5 onwards.
Since IE6 started, when you use! The DOCTYPE declaration specifies the standards-compliant mode, which can be applied to an HTML object.

CSS line-wrapping control in Web pages