Divcss layout basics: four attributes for controlling line breaks in CSS

In divcss layout, we need to control the text.ArticleI have also talked about this knowledge. Today I will introduce it to you systematically. CSS controls the four attributes of line feed.

I. white-spaceYou can implement the pre-label effect in HTML and the nowrap Effect of cells. Click here to view the example.

Example source code [Www.52css.com] 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

Note:
Sets or retrieves the processing method of space characters in an object.
Blank 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.

Related styles:
Text-Overflow
Use it in combination with white-space and you do not need to write it again.ProgramTo determine the length of the string, click here to view the example.

Example source code [Www.52css.com] Syntax:
Text-overflow: Clip | ellipsis

Valid value:
Clip: default value. The omitted mark (…) is not displayed (...), But simple cropping.
Ellipsis: when the object text overflows, the omission mark (…) is displayed (...)

Note:
Set or retrieve whether to use an omitted flag (...) Indicates the overflow of text in the object.
This attribute only applies to the horizontal inline direction, and the general Western text overflows. Inline overflow occurs when the text in the row exceeds the available width but there is no chance of line feed.
To force overflow and apply the ellipsis value, the author must set the white-space attribute value of the object to nowrap.
If there is no chance of wrapping a line (for example, the width of the object container is narrow, and there is a long text with no reasonable broken lines in it), nowrap may also overflow if it is not applied.
To apply the ellipsis value, this attribute must be set to an object with an invisible area. The best choice is to set the overflow attribute to hidden. When the overflow attribute is set to scroll or auto, this attribute will also be applied. However, a scroll bar appears.
By selecting the omitted mark, you can select hidden text. When this option is selected, the omitted flag is hidden and replaced by text.
This attribute provides an efficient way to create an omitted tag in DHTML.

2. Word-break

The most common control line feed attribute is often used with the following word-wrap. Click here to view the example.

Example source code [Www.52css.com] Syntax:
Word-break: normal | break-All | keep-all

Valid value:
Normal: default value. Line feed allowed between words
Break-ALL: this behavior is the same as that of the Asian language normal. It also allows non-Asian text lines to be broken in any word. This value is applicable to Asian texts that contain non-Asian texts.
Keep-ALL: same as normal in all non-Asian languages. Chinese, Korean, and Japanese cannot be disconnected. Suitable for non-Asian texts that contain a small number of Asian texts

Note:
Set or retrieve the line feed behavior of text in an object. Especially when there are multiple languages.
Use break-all for Chinese characters.

3. Word-wrap

If the webpage you designed is not adaptive width, set it to break-word. Otherwise, the version may be staggered. Click here to view the example.

Example source code [Www.52css.com] Syntax:
Word-wrap: normal | break-word

Valid value:
Normal: default value. Allows the content to expand the specified container Boundary
Break-word: the content will wrap in the boundary. If necessary, the line feed (Word-break) will also occur.

Note:
Sets or retrieves whether to disconnect the dashboard when the forward time exceeds the boundary of the specified container.
This attribute only applies to layout objects, such as block objects. To use this attribute for inline elements, you must first set the height or width attribute of the object, set the position attribute to absolute, or set the display attribute to block.

4. Overflow, overflow-X, and overflow-y

This does not strictly control the line feed style, but sometimes it is set to hidden to supplement the shortcomings of word-wrap. For example, you want to display only one line of text in the limited width, the length of the text exceeds the width, and the combination of white-space + Text-overflow can achieve better results. Click here to view the example.

Example source code [Www.52css.com] Syntax:
Overflow: visible | auto | hidden | scroll

Valid value:
Visible: default value. Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object will be cropped with the size of the window or frame containing the object. And the clip attribute settings will be invalid.
Auto: when required, the object content is cropped or the scroll bar is displayed.
Hidden: Do not display content that exceeds the object size
Scroll: Always displays the scroll bar

Note:
Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.
The default value of all objects is visible, except that the default value of textarea object and body object is auto. Set the textarea object. This property value is hidden and Its scroll bar is hidden.
For a table, if the table-layout attribute is set to fixed, the TD object supports the overflow attribute with the default value of hidden. If it is set to scroll or auto, content beyond the TD size will be cut. If it is set to visible, additional text overflows to the right or left (depending on the setting of the direction attribute) cells.
This attribute is available on Mac platform since ie5.
Since IE6, when you use it! The doctype declaration specifies the standards-compliant mode. This attribute can be applied to HTML objects.
You are welcome to participate in comments on 52css.com or post them to w3cbbs.com.