CSS text line feed: white-space, word-break, word-wrap

Three CSS related to text wrapping:

1 white-space

Attribute setting: how to process the blank space in the element.

This attribute declares how to process the blank characters in the element during layout creation.

Possible values:

Normal: The default value is ignore. The blank line character is ignored. Automatic line feed with no scroll bars

Pre: retain blank characters; Retain line breaks, that is, retain the original format

Nowrap: Ignore blank spaces, text does not wrap, until encountering </BR>;

Pre-wrap: Reserved blank characters, line breaks automatically, no scroll bars

Pre-line: combines blank spaces and retains line breaks;

 

2. Automatically wrap word-break: Break-all and word-wrap: break-word differences
word-break: Break-all and word-wrap: break-word can automatically wrap the content of its container such as Div.
the difference is:
1, word-
Break: Break-all
for example, div width 200px, its content will be automatically wrapped at PX. If there is a long English word (congratulation, etc.) at the end of the line, it will cut off the word, the
line end is CONRA (congratulation front-end part), and the next line is the back-end part of tulation (conguatulation.
2. The word-wrap: Break-word example is the same as the preceding example, but the difference is that it regards congratulation as a whole. If the end width of the row is insufficient, it automatically puts the entire word in the next line, instead of truncating the word.
word-break; break-all supports version: ie5 and later. This behavior is the same as that of normal in Asian languages. It also allows non-Asian text lines to be broken in any word. This value is suitable for Asian texts that contain non-Asian texts.
word-wrap: supported version of break-word: ie5.5 or above will be wrapped in the boundary. If necessary, the line feed (Word-break) also occurs.