Several methods for controlling line breaks in CSS

Source: Internet
Author: User
I. white-space
You can implement the pre-label effect in HTML and the nowrap Effect of cells. Click here to view the example.

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

Sets or retrieves the processing method of space characters in an object.
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:
If you use it with white-space, you do not need to write a program to judge the string length. Click here to view the example.

Text-overflow: Clip | ellipsis

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

Sets or retrieves whether an omission mark (...) is used to indicate text overflow 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.

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

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.

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.

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 this line of text exceeds this width, and the combination of white-space + text-overflow can achieve better results. Click here to view the example.

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

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.

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: 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.