Do you really know the difference between word-wrap and word-break?

What are these two things? I believe there are still many people who don't know how to write a word-wrap: break-word; word-break: break-all; such a sentence is forced to be disconnected, or because these two things are too talkative and have a similar length, making it difficult to memorize them.

So what are they? I found the following explanation on the mozilla Website:

Word-wrap

Word-break

We can see that both of the two interpretations contain words such as break lines within words, indicating that they are both closed and closed. Then we try to translate the above two English paragraphs:

Word-wrap:

The word-wrap attribute of css is used to indicate whether the browser is allowed to break a sentence in a word. This is to prevent overflow when a string is too long and cannot be found.

Word-break:

The word-break attribute of css is used to indicate how to break sentences in words.

 

It seems that some differences have been found in the translation of both of the above: word-wrap emphasizes whether to allow inner sentences in words, word-break emphasizes how to break sentences in words.

Speaking of this, it seems that it is still not very clear. Well, the Child paper with poor expression ability cannot afford to hurt. I can only use some examples to remedy it.

First, what is an inner sentence? Of course, it refers to Spanish words.

This is the case where no word exists. We can see that the word is too long, so it overflows the container that wraps it.

In this case, a word is broken into two rows.

 

Make it clear that when word-wrap or word-break is not added, it is the default time of the browser. If a word is long, the remaining space in a row cannot be stored, the browser will move the word to the next line:

Word .. d. The word we created should be followed by long, but the space left after long is not enough, and the word cannot be broken by default, so the browser has to move it down.

 

This long word is not abnormal, because at least it is not longer than the length of the elements wrapped in it, but what if it exceeds?

If it is exceeded, as we mentioned earlier, it will overflow outside its parent container, because it is not allowed to be truncated, then it can only be rushed out.

 

In this case, word-wrap can be used. Let's add word-wrap: break-word to the text to see what will happen.

Haha, you can roll it back for me. Abnormal long words don't matter even if you break it.

In this way, in order to prevent long words from overflow, the sentence is broken in it. This is the word-wrap: break-word function.

Let's take a look at the browser support for word-wrap:

Very good. Almost all browsers support it.

Well, now you can say that all of them have the word-wrap thing. What should we do with word-break?

The evil capitalists always want to squeeze everything from the workers. Do you think there is still a space behind long? It's a waste...

Yes, there are several short words behind long. They are all smelly long words!

So IE is really considerate. Don't scold it any more. Considering that it doesn't waste a little space, it creates word-break. Now let's take a look at what will happen after using word-break: break-all.

Let's see what happened? The abnormal long word is not moved to the next line, but directly placed behind the long, and then disconnected on the right boundary of the parent container. Therefore, it does not waste space.

Let's take a look at the browser support for word-break: break-all:

Except for opera, all others are supported. (Firefox never supports it again )!

At the beginning, we mentioned that word-wrap is used to determine whether to allow the inner sentence of a word. If it is not allowed, long words will overflow. The most important thing is that it will first try to move to the next row and see if the width of the next row is not enough. If it is not enough, it will break the sentence in the word.

Word-break: break-all is more abnormal, because the sentence breaking method is very crude, it does not try to move the long word to the next line, but directly break the sentence in the word. This can also explain why its function is to determine the way in which a sentence is broken, that is, when word-break: break-all is used, the sentence is broken in a rough way. In a word, if you want to save more space, use word-break: break-all!

However, in any case, the broken sentences in a word will have a certain impact on the readability of the Spanish text. Sometimes you need to pay attention to this.

Ps: some articles on the Internet said that word-wrap: break-word does not work for long strings in English. In fact, this is very wrong. word-wrap: break-word can still split a long string of English letters or numbers into multiple lines. In fact, word-wrap: break-word and word-break: break-all have the same thing that they can forcibly break long words, but the difference is word-wrap: break-word will start a new line to place long words. If the new line still cannot hold the long word, the long words will be forcibly broken; and word-break: break-all does not place long words in a new line. When this line cannot be placed, it forces the sentence to be broken.

<! DOCTYPE html> <p style = "background: #000; width: 100px; color: # F00; word-wrap: break-word" data-mce-style = "background: #000; width: 100px; color: # f00; word-wrap: break-word; "> hahaha 555555555555555555555555555555555 </p> <p style =" background: #000; width: 100px; color: # F00; margin-top: 10px; word-break: break-all "data-mce-style =" background: #000; width: 100px; color: # f00; margin-top: 10px; word-break: break-all; "> hahaha 555555555555555555555555555555555 </p> <p>
[Ctrl + A select all tips: you can modify some code and then press run]