|
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 (with IE,CHROME,FF as test browser): {word-break:break-all; Word-wrap:break-word;} The following are the differences between the two methods: 1,word-break:break-all such as div width 200px, its content will go to 200px word wrap, if the end of the line there is a long English words (congratulation, etc.), It truncates the word to the end of the line as Conra (the front-end portion of the congratulation), and 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, Instead of truncating the word. 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 be wrapped within the boundary. If necessary, word wrapping (Word-break) will also occur. The table wraps automatically to avoid distraction. Grammar: Word-break:normal | Break-all | keep-all parameter: Normal: Allows line wrapping Break-all in words according to text rules in Asian and non-Asian languages: The behavior is the same as the normal language of 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 contain some non-Asian text: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. For non-Asian texts grammars with small amounts of Asian text: Word-wrap:normal | break-word parameter: Normal: Allows content to be opened at 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. Advice: Word-break 3C detection will show the problem, resulting in Baidu snapshot will also be problematic-this property opera FIREFOX Browser also does not support the Word-break property can be used White-space:normal, to replace, so that in FIREFOX and IE can be correctly changed line, Also note that the space between the words can not be used to replace, or can not be correctly wrapped.
Word-break:break-all Mandatory line wrapping for CSS properties
