The most easily overlooked CSS mandatory line breaks and css mandatory line breaks

The most easily overlooked CSS mandatory line breaks and css mandatory line breaks

In general, the element has the default white-space: normal (automatic line feed, PS: Do not wrap is white-space: nowrap ), when the entered text exceeds the defined width, it will automatically wrap, but when the entered data is a pile of characters, letters, or numbers without spaces (regular data should not have it, but some testers will do this). When the container width is exceeded, the container will be extended without line breaks.
Solution (use IE, chrome, FF as the test browser ):

Java code  

1. {
3. Word-break: break-all;/* supports IE, chrome, and FF */
5. Word-wrap: break-word;/* supports IE, chrome, FF */
7. }

The following describes the differences between the two methods:
1. word-break: break-all: for example, if the div width is PX, its content will be automatically wrapped in PX. If the end of the line has a long English word (congratulation, etc ), it truncates the word and converts it to the backend part of the row whose end is conra (congratulation) and the next row is tulation (conguatulation.
2. word-wrap: the break-word example is the same as above, but the difference is that it regards the entire word congratulation as a whole. If the end width of the row is insufficient, it automatically puts the entire word in the next line, instead of truncating the word.
3. word-break; break-all supports version: IE5 or above, which is the same as normal in the Asian language. It also allows non-Asian text lines to be broken in any word. This value is suitable for Asian texts that contain non-Asian texts.
Word-wrap: break-word supported version: IE5.5 and above will be wrapped in the boundary. If necessary, the line feed (word-break) also occurs. Automatic table line breaks to avoid opening.
Syntax: word-break: normal | break-all | keep-all
Parameter: normal: line breaks are allowed according to the text rules of the Asian and non-Asian languages.
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
Syntax: word-wrap: normal | break-word
Parameter: normal
Break-word: the content will wrap in the boundary. If necessary, word-break also indicates whether to disconnect or retrieve the line break when the line breaks beyond the boundary of the specified container.
Suggestion: If word-break is detected by 3C, a problem will be displayed, which may lead to Baidu snapshots.-The opera firefox browser does not support the word-break attribute and can use white-space: normal; in this way, both FireFox and IE can get the correct line feed, and note that spaces between words cannot be replaced, otherwise the line feed cannot be correct.