CSS Mandatory line wrapping

In general, the element has the default white-space:normal (Word wrap, PS: No newline 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.

Workaround (in IE,CHROME,FF for Test browser):

{

Word-break:break-all; /* Support IE,CHROME,FF not supported */

Word-wrap:break-word;/* support ie,chrome,ff*/

}

The following is a description of the differences between the two methods:

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.

Syntax: Word-break:normal | Break-all | Keep-all

Parameters: Normal: Allows line wrapping in words according to the text rules in Asian and non-Asian languages

Break-all: The behavior is the same as in 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

Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. Suitable for non-Asian texts containing small amounts of Asian text

Syntax: Word-wrap:normal | Break-word

Parameters: Normal: Allow content to open the specified container boundary

Break-word: Content will be wrapped within the boundary. 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.

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.

CSS Mandatory line wrapping