Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the difference between forced newline and forced non-newline". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deeper together to study and learn "what is the difference between forced newline and forced non-newline"!

Attributes used for forced line breaks and forced line breaks

There are three CSS attributes that we generally use to control newlines: word-wrap; word-break; white-space. These three attributes can be said to have been created specifically for text breaks. First of all, we need to know what these three properties are for:

word-wrap syntax:

word-wrap: normal(default)| break-word

Each browser recognizes

Parameters:

normal: Allow content to push open specified container boundaries.

break-word: Content will wrap within boundaries. If necessary, a word-break will be triggered (note: please distinguish between word-break and break-word, which are two different things, one is an attribute and the other is a parameter).

Description:

Word-wrap is a control of whether to "break lines for words," setting or retrieving whether to break lines when the current line exceeds the boundaries of a specified container. There is no problem with Chinese and no problem with English sentences. But for long strings of English, it doesn't work.

Example:

Congration is a long string of English words. Word-wrap:break-word The whole word is regarded as a whole. If the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line instead of truncating the word. This is the explanation that it does not work for long strings of words. Word-wrap:normal is the default, English words are not broken up.

Conclusion:

The scope of action is only standard block-level elements such as div. Although table elements such as th and td are recognized, they have no effect (if td,th plus width word-wrap can play an effect under IE, but from the perspective of full compatibility and convenient memory, the previous conclusion shall prevail).

word-break syntax:

word-break: normal(default)| break-all | keep-all

Firefox and Opera do not recognize

Parameters:

normal: Allow line breaks within words according to Asian and non-Asian text rules.

break-all: This behavior is the same as normal for Asian languages. Any intra-word breaks in non-Asian language text lines are also allowed. 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 breaks are not allowed. Suitable for non-Asian text containing small amounts of Asian text.

Description:

word-break:break-all, is a broken word. When a word reaches a boundary, the next letter automatically moves to the next line. It mainly solves the problem of long string English (just to make up for the defect that word-wrap:break-word does not work for long string text).

Example:

Continue with the above congratulation as a long string, word-break:break-all, which truncates the word, so that the end of the line becomes something like conra(the front part of congratulation), and the next line becomes the back part of tuation (conguatulation).

word-break:keep-all, refers to Chinese, Japanese, and Korean continuous words. That is, only at this time, do not use word-wrap, Chinese will not be newline. (English sentences are normal.)

Conclusion:

The scope of action is only standard block-level elements such as div. Although table elements such as th and td are recognized, they have no effect (word-break:break-all is effective in Chrome after testing, but from the perspective of full compatibility and convenience, the previous conclusion shall prevail). Firefox,Opera doesn't recognize word-break, let alone the effect of using word-break in th,td under Firefox.

white-space syntax:

white-space: normal(default)| pre | nowrap

Parameters:

normal: default. White space is ignored by browsers.

pre: White space is preserved by the browser. It behaves like the pre tag in HTML.

nowrap: Text does not wrap, text continues on the same line until it encounters the br tag.

Description:

For the pre attribute, it means that successive whitespace characters in HTML are merged, and then in order to prevent them from merging (most often to indicate that the code text is indented), the whitespace characters are kept without adding additional styles and tags to control its indentation and newline. The pre tag works the same way: it has a white-space:pre by default.

For the nowrap attribute, this is the core of the mandatory non-line, and the general mandatory non-line is to use this attribute. There is no problem in Firefox div and td, and in IE div. The only flaw is that there will be a problem in the TD of IE. If the TD does not specify a width, nowrap will still work. If the TD has a width and there are no punctuation and no spaces in the text (such as Chinese long text), nowrap will no longer work. The solution is to add word-break:keep-all; to solve this problem.

Summary forced line break:

If you need to force a line break in a standard block-level element such as div, the most common solution is word-wrap:break-word; word-break:break-all; the disadvantage of this approach is that if the end of the line happens to be a long string of English words, then the word will be torn (and FF does not recognize word-break, but will not tear the word). Personally, if you put a long string of addresses similar to URL in this div, then this scheme is a very good choice (note: 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 also a helpless choice). If you are not placing a long string of English that can be broken such as URL, but an English sentence, then use word-wrap:break-word;. As for word-wrap:break-word; overflow:hidden; such a writing, it is said to be compatible with IE and FF, but after personal testing seems to have no special effect. Of course, if you have a better plan, you can leave a message to participate in the discussion. Your comments are also welcome here.

If you need to force a line break in a table element such as td,th, the recommended way is to set table-layout:fixed for the table first. As for why you want to set this attribute, please refer to my article "What to save you, my Table", which has a more detailed explanation. Basically, after setting this attribute, the basic line feed problem can be solved without td,th in the table because of the number of contents in the table to grab the width of other td,th. If you still have a problem with forced newlines, add a div inside the td and the situation will be resolved as discussed above.

Summary forced no line breaks:

The problem of forcing no line breaks is relatively easy to analyze, as discussed above, using white-space:nowrap, Firefox div and td, and IE div, there is no problem. The only flaw is that there will be a problem in the TD of IE. If the TD does not specify a width, nowrap will still work. If the TD has a width and there are no punctuation and no spaces in the text (such as Chinese long text), nowrap will no longer work. The solution is to add word-break:keep-all; to solve this problem. To sum up, the safer way is to put a div layer between the text and td, and then use nowrap, then force no line break. Note that at this time it is very likely that too much text will cause overflow containers, so you have to add an overflow:hidden to prevent overflow containers, so that you can be compatible with various browsers.

Thank you for reading, the above is "what is the difference between forced line break and forced line break" content, after the study of this article, I believe that we have a deeper understanding of the difference between forced line break and forced line break, and the specific use needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.