The difference between Word-break and word-wrap of CSS automatic line wrapping

What are these two things, I believe there are still a lot of people confused, will only be rote writing a word-wrap:break-word;word-break:break-all, such things to force the segmentation, or because these two things are too awkward, The same length, which makes it difficult to memorize the back.

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.

So the workaround (with IE,CHROME,FF as the test browser) is written in two ways:

{
word-break:break-all; 
word-wrap:break-word;
}

The difference between the two methods illustrates:

1,word-break:break-all such as a div width of 400px, its content will go to 400px word wrap, if the end of the line has a long English words (congratulation, etc.), it will truncate the word, to the end of the line is Conra ( Congratulation), the backend portion of the next behavior tulation (conguatulation).

2,word-wrap:break-word example is the same as above, but the difference is that it will congratulation the whole word as a whole, if the line end width is not enough to display the whole word, it will automatically put the whole word to the next line, not the word truncated.

HTML code:

<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">
    congratulation congratulation congratulation congratulation congratulation congratulation</div>
    </br/>
    <div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">
    congratulation congratulation congratulation congratulation congratulation congratulation</div>

Results:

Line Wrap Word-break:break-all and Word-wrap:break-word
Both Word-break:break-all and Word-wrap:break-word are able to wrap the contents of their containers, such as Div.
The difference between them is:
1,word-break:break-all such as a div width of 200px, its content will go to 200px word wrap, if the end of the line has a long English words (congratulation, etc.), it will truncate the word, to the end of the line is Conra ( Congratulation), the backend portion of the next behavior tulation (conguatulation).
2,word-wrap:break-word example is the same as above, but the difference is that it will congratulation the whole word as a whole, if the line end width is not enough to display the whole word, it will automatically put the whole word to the next line, not the word truncated.
3,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. Word-break:normal | Break-all | Keep-all parameter: Normal: Allows word wrapping in words according to the rules of Asian and non-Asian languages Break-all: This 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 keep-all that contains some non-Asian text: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. For non-Asian text syntax with small amounts of Asian text: Word-wrap:normal | Break-word parameter: Normal: Allows content to open the specified container boundary Break-word: Content wraps within the bounds. 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.
The corresponding script attribute is wordwrap. Please refer to the other bibliography I have written. Syntax: Table-layout:auto | Fixed parameter: Auto: The default automatic algorithm. The layout will be based on the contents of each cell. The table is displayed after each cell has been read by the calculation. The speed is slow fixed: fixed layout algorithm. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table border, the cell spacing, the width of the column, and the table content regardless of the description: Set or retrieve the table layout algorithm. The corresponding script attribute is tablelayout.
Recommendation: Word-break with 3C detection will display problems, resulting in Baidu snapshot will also be a problem-this property opera FIREFOX Browser also does not support the Word-break property can be used 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.

This will be at a glance.