Home > Article > Web Front-end > css implements forced non-line wrapping/automatic line wrapping/forced line wrapping
Force no line wrapping div{
white-space:nowrap;
}
Automatic line wrapping
div{
word-wrap: break-word;
word-break: normal;
}
Force English words to break
div{
word-break:break-all;
}
CSS settings do not break:
overflow: hidden hide
white-space: normal Default
pre Line breaks and other whitespace characters will be protected
nowrap forces all text to be displayed on the same line until the end of the text or encountering the br object
Set forced line break:
word-break:
normal; According to the text rules of Asian and non-Asian languages, line breaks within words are allowed
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. A highly suitable solution for non-Asian text that contains a small amount of Asian text.
English does not wrap
Add word-break: break-all; in CSS to solve the problem. This problem only exists in IE. When tested under FF, FF can add scroll bars by itself, which does not affect the effect. It is recommended that when doing Skin, remember to add word-break: break-all; in the body. This can solve the IE framework The problem of being stretched by English
The following quotes the instructions of word-break. Note that word-break is a proprietary attribute of IE5+
Syntax:
word-break: normal | break-all | keep-all
Parameters:
normal: Allow line breaks within words according to text rules for Asian and non-Asian languages
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. Suitable for non-Asian text that contains a small amount of Asian text
Description:
Sets or retrieves the intra-word wrapping behavior for text within an object. Especially when multiple languages appear.
For Chinese, break-all should be used.
The corresponding script feature is wordBreak. Please see other books I have written.
Example:
div {word-break : break-all; }
If you want IE6 to be compatible: div {WORD-WRAP:break-word;word-break : break-all; }