The following is reproduced from https://www.cnblogs.com/dtdxrk/
word-break: break-all word truncated wrap
word-break: break-all e.g. div width 200px, its contents will to 200px wrap, if the end of the line there are English words long (Congratulation, etc.), it the words cut into the end of the row is conra (congratulation of the front end portion), the next behavior tulation (conguatulation) of the rear end portion.
Support version: IE5 and above the normal behavior of the same Asian language. Also allows arbitrary word non-Asian language text line is disconnected. The value for non-Asian text that contains a number of Asian text.
语法：word-break : normal | break-all | keep-all
normal: the text in accordance with the rules of non-Asian languages and Asian languages, allowing line breaks within a word
break-all: This behavior is the same as normal for Asian languages. Also allows arbitrary word non-Asian language text line is disconnected. The value for non-Asian text that contains a number of Asian text
keep-all: like all normal non-Asian languages. For the Chinese, Korean, Japanese, the word is not allowed off. For non-Asian text that contains a small amount of text in Asia
word-wrap: break-word word is not truncated wrap
word-wrap: break-word and the example above, but the difference is that it would congratulation whole word as a whole, if the end of the line is not wide enough to display the entire words, it automatically into the next line of the whole word, the word will not cut off.
Support version: IE5.5 above will wrap within the boundary. If desired, the inner word wrap (word-break) will occur. Table wrap, avoid distraction.
语法： word-wrap : normal | break-word
normal: open top vessel allows the content specified boundary
break-word: content wrap within the boundary. If necessary, the word wrap (word-break) also occurs line Description: Sets the current row when retrieving or exceeds the specified container is disconnected to switch the boundary.
CSS mandatory wrap
In general, the elements have a default
white-space: normal Wrap
PS: do not wrap a white-space: nowrap
When the input exceeds a defined width of the text will wrap, but when the input data is a bunch of characters with no spaces or letters or numbers (conventional data should not have it, but some testers would do like this), exceeds the width of the container will stretch the container, not wrapped.
Solution (in IE, chrome, FF test browser):
{
word-break: break-all; / support IE, chrome, FF is not supported /
word-wrap:break-word;/支持IE，chrome，FF/
}
Suggestions: word-break detection with 3C will show the problem, resulting in Baidu snapshots will go wrong - this property OPERA FIREFOX browser does not support word-break property can be white-space: normal; instead, this in FireFox and IE it can correctly under wraps, but also to note that spaces between words can not be used in place of, or can not properly wrap.
text-overflow ellipsis ... grammatical structure style
text-overflow Syntax:
text-overflow: Clip | ellipsis
clip: omitting mark is not displayed (...), but simply cutting
ellipsis: displaying omitted when the marking object text overflow (...)
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
————————————