word-break
This attribute determines the text beyond the container, whether the browser automatically insert line breaks.
Property values:
- normal: Default line-breaking rules - the English word as a unit newline characters do not wrap continuous, direct parent element overflow
- All-BREAK : ignore the words, forced at the edge of the parent element position truncated (the most space-saving, it seems most neat, but the words may be from split). In addition consecutive punctuation marks will not wrap, I do not know why. . .
- keep-all: the normal, like Japan and South Korea and even in continuous text does not wrap up (there will wrap when separated by a space)
- * BREAK-Word: This is not a standard attribute only some browsers support, the effect is the same word-wrap: break-word;
word-wrap（overflow-wrap）
This determines whether the internal word in a browser should not be disconnected properly insert a line break.
Property values:
- normal: not inside word insert a line break that line breaks only occur in places such as spaces between words are not truncated words. If the word is super long, the overflow parent container.
- Word-BREAK : "If there is no suitable cut-off point, it may truncate the word in any position." Explain: First, try the normal line breaks (this line does not fit it into the next line), if the new line is very long, it is truncated at any position. Note: Continuous punctuation will be truncated.
white-space
This property determines how browsers handle white space and line breaks.
Property values:
- normal: The default behavior, line breaks converted to blank, blank continuous consolidation, but if necessary, change the line (so-called "essential" for English, it means that the next word behind a word at the end of the line does not fit, and have the whole into the next line; it is natural for the Chinese wrap)
- nowrap: Other, like normal, but wrap "necessary" is not done, killed not wrap
- pre: Wrap retention continuous blank, newline or br tag, but does not automatically insert a line break
- pre-wrap: retention continuous blank, in the event of a line break, <br> wrap, automatically insert line breaks when "necessary."
- pre-line: merge consecutive whitespace, in the event of a line break, <br> wrap, automatically insert line breaks when "necessary."
The relationship of these three attributes, I understand the following:
First, white-space determines the browser how to render a line break, if it chooses to ignore the line breaks, then the other two attributes to guide browsers automatically insert line breaks are invalid; and its own insert line breaks are not affected.
Second, word-break in preference to word-wrap, because the browser will first word as a whole. for example:
word-break value is normal or keep-all, there may be a long word overflow container. At this time, word-wrap: break-word will deal with this situation, cut off from the middle of the word, browser ultimate effect is demonstrated by the break-word.
And if the value of word-break into a break-all, so long will be forced to cut off the word, at this time there is no word-wrap comes into play. Browser ultimate effect is demonstrated by the break-all.
(PS: If both break-all set up and break-word, then a long list of punctuation will not wrap, for unknown reasons ... for long strings of punctuation normal wrap, it is recommended to use only break-word)
Therefore, if the demand is such that (usually UGC text display):
1. newline, are displayed as blank
2. normal text wrapping, not overflow container
Then the combination of attributes need to be set as follows:
.text {
white-space: pre-wrap;
word-wrap: break-word;
}