CSS control forced line break workaround

First, the problem found
In general, the element has the default white-space:normal (Word wrap, no wrapping is white-space:nowrap), when the input text exceeds the defined width will be automatically wrapped, But when the input data is a bunch of characters or letters or numbers without spaces (general data should not have it, but some testers will do this), more than the container width when the container will be large, do not wrap.

Second, the solution
Take Div as an example
div{
Word-break:break-all;
Word-wrap:break-word;
}

Three, the difference explanation
① understanding of truncation
Word-break:break-all
Div width 200px, its content will go to 200px word wrap, if the end of the line there is an English congratulation words very long, will be truncated, the line ends as Conra, the next behavior tulation.

Word-wrap:break-word
The example is the same as above, but the difference is that it will congratulation the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line without truncating the word.

② supported version
Word-break;break-all supported version: IE5 The behavior is the same as the normal for Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text.
Word-wrap:break-word Support version: IE5.5 The above content will wrap within the boundary. If necessary, word wrapping (Word-break) will also occur. The table wraps automatically to avoid distraction.

③ syntax
Word-break:normal | Break-all | Keep-all
Normal: Allow line wrapping in words according to Asian and non-Asian language text rules
Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. Suitable for non-Asian texts containing small amounts of Asian text

Word-wrap:normal | Break-word
Normal: Allow content to open the specified container boundary
Break-word: Content will be wrapped within the boundary. Word Wrapping (Word-break) also occurs if desired: Sets or retrieves whether to break a career change when the current row exceeds the bounds of the specified container.

Iv. Points of attention
① if one of them is found to control the line break, write two. such as td{Word-break:break-all;word-wrap:break-word}
②word-break with 3C detection will display problems, resulting in Baidu snapshot will also be a problem, this property opera Firefox browser does not support Word-break properties can be replaced with White-space:normal, In this way, Firefox and IE can be correctly wrapped, and note that the space between the words can not be used to replace, or can not be correctly wrapped.