Word-wrap: break-word; and word-break: break-all,

Word-wrap: break-word; and word-break: break-all,
How to distinguish word-wrap: break-word; and word-break: break-all ;?????

I just saw these two attributes, and my heart had 10 thousand million words. Why is there such an attribute? Not only is it like a mouthful, but it must be memorized. so I asked du Niang to sort out my understanding.

First, let's talk about the functions of these two attributes: sentences!

These two attributes apply to English and numbers. The browser treats numbers and long strings of English including url addresses as a word. If the row of the word cannot be displayed, the overall line feed will be processed.

If a style with a special long word that does not have a surface attribute, the area of the displayed text will overflow.

As shown below

Let's take a look at the specific role of this attribute.

Word-wrap: break-word;

This attribute means:

If a string is too long and cannot be displayed after the first line of text,

The long string is displayed from the second line. If the second line does not show any more, it is disconnected from the region boundary and the remaining string is displayed to the third line.

I don't know whether this can be understood. I simply wrote a code example and referred to it for understanding.

 

  <style type="text/css">    p{    word-wrap:break-word;    width:200px;    background:orange;    }  </style> 
 
Code execution result:

In the past, word-wrap: break-word; was not added:

Break-word: break-all;
If a frugal project manager sees that there is still so much space behind "hello", he is definitely not satisfied, saying that you are wasting your money... no worries.
Now let's take a look at break-word: break-all;

This attribute: If the row does not have enough space, it is still displayed in the row, and the excess is displayed in the next row.
Let's talk about the code.
  <style type="text/css">    p{    /*word-wrap:break-word;*/    word-break:break-all;    width:200px;    background:orange;    }  </style> 
Code execution result:

In the past, word-break: break-all; was not added:

If the frugal project manager sees you, it will definitely praise you! (@-@)
So far, I wonder if you understand the difference between word-wrap: break-word; and word-break; break-all!
 
Summary! If there are any errors, I hope you can correct them! Thank you!
 
Respect originality! Reprinted please indicate the source!