When doing DivCSS layout, you need to control the text. Today I will introduce it to you systematically. There are four properties in CSS that control line breaks.
1. white-space
You can achieve the effect of PRE tags in HTML and the noWrap effect of cells.
grammar:
white-space : normal pre nowrap
Value:
normal: Default value. Default processing method. Text automatically handles line breaks. If the container boundary is reached, the content will go to the next line
pre: Newlines and other whitespace characters will be protected. This value requires IE6+ or !DOCTYPE declared as standards-compliant mode support. If the !DOCTYPE declaration does not specify standards-compliant mode, this attribute can be used, but will have no effect. The result is equivalent to normal. See pre object
nowrap: Forces all text to be displayed on the same line until the end of the text or a br object is encountered. See noWrap attribute
illustrate:
Sets or retrieves how space characters within an object are handled.
White space characters, such as newlines, spaces, and TAB, are ignored by default in HTML documents. When this property is set to normal or nowrap, you can use the non-wrap-space named entity to add spaces and the br element to add line breaks. This property has the same effect on content you manipulate using the Document Object Model (DOM) as it does on content displayed by IE.
This property works on block objects.
Related styles:
text-overflow
Combining it with white-space eliminates the need to write a program to determine the length of a string. Click here to view an example.
grammar:
text-overflow : clip ellipsis
Value:
clip: default value. Does not show omission markers (…), but simply crops
ellipsis: Displays an ellipsis mark (…) when the text within the object overflows
illustrate:
Sets or retrieves whether to use an ellipsis mark (...) to mark the overflow of text within the object.
This property only affects the overflow of normal Western text in the horizontal inline direction. Inline overflow occurs when the text within a line exceeds the available width without an opportunity to wrap.
To force overflow to occur and apply the ellipsis value, the author must set the object's white-space property to nowrap.
If there is no opportunity for line breaks (for example, the width of the object container is narrow and there is a long text without reasonable line breaks), it is possible to overflow without applying nowrap.
In order for the ellipsis value to be applied, this property must be set to an object that has an invisible area. 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 scroll bars will appear.
By selecting the omission mark, hidden text can be selected. When selection occurs, the ellipsis mark is hidden and replaced by text.
This attribute provides an efficient way to make omission markup in DHTML.
2. word-break
The most commonly used property to control line wrapping is often used in combination with word-wrap below.
grammar:
word-break: normal break-all keep-all
Value:
normal: Default value. Allow line breaks between words
break-all: This behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text
keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Good for non-Asian text with a small amount of Asian text
illustrate:
Sets or retrieves the word wrapping behavior for text within an object. Especially when multiple languages appear.
For Chinese, break-all should be used. [Cut-Page]
3. word-wrap
If the web page you design is not adaptive in width, you need to set it to break-word, otherwise the page may be staggered.
grammar:
word-wrap : normal break-word
Value:
normal: default value. Allow content to extend beyond the specified container boundaries
break-word: Content will break within boundaries. If necessary, word-break will also occur
illustrate:
Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container.
This property only works on layout objects, such as block objects. To use this attribute for inline elements, you must first set the object's height or width attribute, or set the position attribute to absolute, or set the display attribute to block.
4. overflow, overflow-x, overflow-y
This is not strictly controlling the line wrapping style, but setting it to hidden can supplement the shortcomings of word-wrap at certain times. For example, you want to display only one line of text within the limited width, but the length of this line of text exceeds this width. , combined with white-space+text-overflow can achieve better results.
grammar:
overflow: visible auto hidden scroll
Value:
visible: Default value. Does not cut content or add scrollbars. If this default value is explicitly declared, the object will be clipped to the dimensions of the containing window or frame. And the clip attribute setting will be invalid
auto: The object content will be cropped or scroll bars will be displayed when necessary
hidden: Do not display content that exceeds the object size
scroll: always show scroll bars
illustrate:
Retrieves or sets how the object's content is managed when it exceeds its specified height and width.
The default value for all objects is visible, except for textarea objects and body objects, where the default value is auto. Setting this property value of a textarea object to hidden will hide its scroll bars.
For tables, if the table-layout attribute is set to fixed, the td object supports the overflow attribute with a default value of hidden. If set to scroll or auto, content exceeding the td size will be cut. If set to visible, it will cause extra text to overflow to the cells on the right or left (depending on the direction property setting).
This property is available on MAC platforms starting with IE5.
Starting with IE6, this attribute can be applied to html objects when you specify standards-compliant mode using the !DOCTYPE declaration.