css control forced line break solution

1. Problem Found
Generally, elements have the default white-space:normal (automatic line wrapping, white-space:nowrap if not line wrapping). When the entered text exceeds the defined width, it will automatically wrap. But when the entered data is a bunch of characters or letters or numbers without spaces (regular data should not be there, but some testers do it this way), if it exceeds the width of the container, the container will be expanded without line breaks. .

2. Solution
Take div as an example
div{
word-break:break-all;
word-wrap:break-word;
}

3. Difference explanation
① Understanding of truncation
word-break:break-all
If the div is 200px wide, its content will automatically wrap at 200px. If There is a very long English word "congratulation" at the end of the line. The word will be truncated and become "conra" at the end of the line and "tulation" on the next line.

word-wrap:break-word
The example is the same as above, but the difference is that it will congratulate the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically congratulate the entire word. Put the word on the next line without truncating the word.

② Supported versions
word-break;break-all Supported versions: IE5 and above This behavior is the same as normal in 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.
word-wrap:break-word Supported versions: IE5.5 and above The content will wrap within the boundary. If necessary, word-breaks will also occur. The table automatically wraps to avoid stretching.

③ Grammar
word-break : normal | break-all | keep-all
normal : According to the text rules of Asian languages ​​and non-Asian languages, line breaks within words are allowed
break- all : The 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

word-wrap : normal | break-word
normal : Allow content to break the specified container boundary
break-word : Content will wrap within the boundary . If necessary, word-break also occurs. Description: Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container.

4. Notes
①If you find that one of them to control line breaks is invalid, write two. For example, td{ word-break:break-all;word-wrap:break-word }
② word-break will show problems when detected by 3C, which will also cause problems in Baidu snapshots. This attribute is not supported by OPERA FIREFOX browser. The word-break attribute can be replaced by white-space:normal, so that the line breaks can be correct under FireFox and IE. Also, it should be noted that the spaces between words cannot be used instead, otherwise the line breaks will not be correct.

The above is the detailed content of css control forced line break solution. For more information, please follow other related articles on the PHP Chinese website!