English long word break word-break VS Word-wrap

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

What are these two things, I believe there are still a lot of people confused, will only be rote writing a word-wrap:break-word;word-break:break-all, such things to force the segmentation, or because these two things are too awkward, The same length, which makes it difficult to memorize the back.

What the hell are they? I found the following explanations on Mozilla's website:

Word-wrap

Word-break

We see two explanations of the words "break lines within words", which indicate that they are all related to the word segmentation. Then we try to translate the above two paragraphs in English:

Word-wrap:

The Word-wrap property of CSS is used to indicate whether a browser is allowed to segment within a word, which is to prevent overflow when a string is too long and cannot find its natural segmentation point.

Word-break:

CSS's Word-break attribute is used to indicate how words are segmented within a word.

Seemingly from the above two read all the pain of the translation found some differences: Word-wrap stressed whether to allow the word within the sentence, and Word-break stressed is how to do the words within the segmentation.

Speaking of here, it seems that it is still not very clear, well, poor expression ability of the child paper really hurt Ah, can only use some examples to remedy.

First, what is word segmentation? Of course, it refers to the western words.

This is the case where there is no word inside the sentence, we see that the word is too long, so it overflows the container that wraps it.

This is the case of word segmentation, that is, a word has been broken into two lines.

First of all to be clear, no word-wrap or Word-break, is the browser by default, if there is a word is very long, resulting in a row of the remaining space has not been placed, then the browser will move the word to the next line:

Word.. D This word we created should be immediately after long, but long after the rest of the space is not enough, and the word default is not broken, so the browser had to condescend to move it down.

This long word is not a pervert, because at least it does not grow beyond the length of the element that wraps it, but what if it exceeds it?

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

Word-wrap can come in handy at this time. Let's add Word-wrap:break-word to the text and see what happens.

Haha, you go back to me, perverted long words, even if you break it doesn't matter.

Thus, in order to prevent the long word overflow, it is in its internal segmentation. This is the function of Word-wrap:break-word.

Look at Word-wrap's browser support situation:

Very good, almost all browsers are supported.

Well, you can say now, all have word-wrap this thing, that also want to word-break to do what bird?

The evil capitalists always want to squeeze dry all the laborers, you see, in the long after there is still a space, is it so put? It's too wasteful ...

Yes, long after there are enough to put a few short words, are the long word of the smelly pervert!

So IE really thoughtful, do not scold it, considering the problem of not wasting a little space, it created a word-break this thing. Now let's take a look at using Word-break:break-all; What happens after that.

See what's going on? The perverted long word was not moved to the next line, but was placed directly behind a long and then dropped at the right edge of the parent container. So, it's not a waste of space, OH.

Take a look at Word-break:break-all's browser support situation:

In addition to opera, all the other support Yes (Firefox has never supported the change to support)!

At first we said that Word-wrap is used to decide whether to allow words within the word, if not allowed long words will overflow. The most important thing is that it will try to move to the next line first, to see if the next line is too wide enough for the words to be segmented within.

And Word-break:break-all is more abnormal, because it is very rude in the way of segmentation, it will not try to move the long word to the next line, but directly to the words within the segmentation. This can also explain why it is decided to use the method of segmentation, that is-with the word-break:break-all, it is tantamount to using the rough way to the segmentation. In a word, if you want to save space, then use Word-break:break-all on the right!

However, in any case, the word segmentation will have a certain impact on the readability of Western languages, sometimes it is necessary to pay attention to.

PS: Some articles on the web said that Word-wrap:break-word to long string of English does not work, in fact, this is very wrong, Word-wrap:break-word can still put a long string of English or digital split into multiple lines. In fact, Word-wrap:break-word and word-break:break-all in common is the long words can be forced to sentence, the difference is Word-wrap:break-word will first start a new line to place long words, The new line or the long Word will be forced to sentence the long words, and word-break:break-all will not put the long words in a new line, when the line is not enough to directly force the segmentation.

 <!DOCTYPE HTML><Pstyle= "background: #000; width:100px; color: #F00; Word-wrap:break-word"Data-mce-style= "background: #000; width:100px; color: #f00; word-wrap:break-word;">Haha 555555555555555555555555555555555</P><Pstyle= "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;">Haha 555555555555555555555555555555555</P>

[Ctrl + a All selection tips: You can modify some of the code, then press run]

Original link: Do you really understand the difference between word-wrap and word-break?

Related reading:

CSS Mandatory English/Chinese line break and no line break

English long word break word-break VS Word-wrap