The contents of the div are wrapped automatically.

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. 

I've tried it on the website and I don't really support it, so you can verify it .

The contents of the div are wrapped automatically.