CSS text wrapping related properties and explanations

This digest from http://www.wufangbo.com/css-qiang-zhi-huan-hang/

Properties used to force line breaks and force non-wrapping

We generally control the CSS properties used for line wrapping a total of three:Word-wrap; word-break; white-space. These three attributes can be said to be created specifically for word breaking. First we need to know exactly what these three properties are made of:

Word-wrap Syntax:

Word-wrap:normal (default) | Break-word
Each browser is able to identify

Parameters:

Normal: Allows content to be opened to the specified container boundary.
Break-word: Content will be wrapped within the boundary. Word-break is triggered when necessary (Note: Please distinguish between Word-break and Break-word are different things, one for the attribute parameter).

Description

Word-wrap is the control of whether the line is broken or not, and whether to break a career change when the current row exceeds the bounds of the specified container. There is no problem in Chinese, and the English sentence is fine. But for long strings of English, it doesn't work.

Example:

Congratulation this word belongs to a long string of English, Word-wrap:break-word 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 truncation, This is the explanation for the long string of words that do not work. Word-wrap:normal is the default, English words are not opened.

Conclusion:

The scope of the function is only a div, such as standard block-level elements, th,td such table elements, although recognized but no effect (if the td,th plus width word-wrap in IE is able to play an effect, but according to the full compatibility of the convenient memory point of view or the previous conclusions prevail).

Word-break Syntax:

Word-break:normal (default) | Break-all | keep-all
Firefox, Opera does not recognize

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 text containing small amounts of Asian text.

Description

Word-break:Break-all, is to break the word. The next letter is automatically to the next line when the word is to the border. The main solution to the long string of English problems (just make up the above word-wrap:break-word for long strings of text does not work on the defect).

Example:

Continue to congratulation the word belongs to the long string of English, Word-break:break-all it will cut the word, the end of the line will become similar to CONRA (congratulation of the front part), The backend portion of the next behavior tulation (conguatulation).
Word-break:keep-all, refers to Chinese, Japanese, and Korean constant words. That is, only use this time, do not word-wrap, Chinese will not be changed line. (The English statement is normal.) ）

Conclusion:

The scope of the function is only a div, such as standard block-level elements, th,td such table elements, although recognized but not effective (tested chrome under Word-break:break-all is effective, but according to the full compatibility of the convenient memory point of view or the previous conclusions prevail). Firefox,opera is not recognized word-break, not to mention the TH,TD under the Firefox use Word-break effect.

White-space Syntax:
White-space:normal (default) | Pre | NoWrap

Parameters:

Normal: Default. The blank will be ignored by the browser.
Pre: The blank will be reserved by the browser. It behaves like a pre tag in HTML.
NoWrap: Text does not wrap, text continues on the same line until a BR tag is encountered.

Description

For the Pre property, it is actually a contiguous number of whitespace characters in the HTML will be merged, and then in order not to let him merge (the most common occasion is to indicate that the code text indentation) so that the white space character to continue without the need for us to add additional styles and labels to control its indentation and line wrapping. The principle of the pre tag is the same. The internal default has a white-space:pre.
For the NoWrap property, this is a forced non-newline core, which is generally forced not to break the line is to take advantage of this property. Firefox's DIV and TD, as well as the div in IE, are no problem. The only flaw is that in the IE TD there will be a problem, if TD does not specify the width, then the nowrap is still valid, if the TD has a width, and no punctuation in the text, no spaces (such as Chinese long string of text), nowrap is no longer valid. The solution is to add word-break:keep-all, which resolves the problem.

Summarize forced line breaks:

If you need to force line breaks in a standard block-level element such as Div, the most common scenario is word-wrap:break-word; Word-break:break-all; The disadvantage of this approach is that if it happens that the end of the line is a long string of English words, then the word will be ripped out of the awkward style (and FF does not recognize Word-break, instead of tearing the word). Personally think that if you put in this div similar to the URL of this long string address, then this scheme is a very good choice (note: Because the FF does not recognize word-break, so there is no guarantee that the end of each line will be neatly broken URL words, but this is a helpless choice). If you do not place URLs such as long strings of English that can be broken, but English sentences, then use Word-wrap:break-word; As for the online see have word-wrap:break-word; Overflow:hidden; This is said to be compatible with IE and FF, but it does not seem to have any special effect after personal testing. Of course, if you have a better plan can also leave a message to participate in the discussion, here also very welcome your opinion.

If you need to force a line break in a TABLE element such as td,th, the personal preferred way is to set the table table-layout:fixed First, basically set this property after the basic line-wrapping problem can be resolved without the table in the TD, th because of the amount of content in the inside of looting other td,th width of the situation occurs. At this point if you still have a forced line-up problem, then inside this TD add a layer of Div, then the situation will be as discussed above the way to solve.

Summary force no Line break:

Forcing the non-wrapping problem to be easier to analyze, as discussed above in the use of White-space:nowrap,firefox Div and TD, and IE Div, there is no problem. The only flaw is that in the IE TD there will be a problem, if TD does not specify the width, then the nowrap is still valid, if the TD has a width, and no punctuation in the text, no spaces (such as Chinese long string of text), nowrap is no longer valid. The solution is to add word-break:keep-all, which resolves the problem. Integrated down, the more secure way is between the text and TD again set a layer of div, and then use nowrap, then it is forced not to change the line. Note that this is likely to cause too much text to overflow the container, so you have to add a overflow:hidden to prevent overflow of the container, which can be compatible with each browser.

summed up so much, found that there seems to be a few properties in the browser of the various compatibility of the balance, now seems to have a perfect solution can be all compatible with each browser, we can do the most is as far as possible to keep a browser display consistent. If you still feel that must be compatible with all browsers, then the final plan is to use JS, later in the article I will consider from the lowest JS cost to meet this requirement, but this is not in the scope of this article discussed.

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 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 will cut the word, into the end of the line is Conra ( Congratulation), the backend portion of the next behavior tulation (conguatulation).

2, the 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, and will not cut off the word.

3, Word-break:break-all support version: IE5 above this behavior is the same as the normal Asian language. 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 the internet will show problems, leading to 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 text wrapping related properties and explanations