About the cause and resolution of text overflow in div tag after setting width in Web site development

I. Causes of problems

When we declare the width of the div tag, but the text will still appear out of bounds, we do not know if you have found that only the text content is a word or a pure number

When this happens, I have specifically tested two scenarios, and the results are as follows:

① When the text content is pure numbers or letters:

② when text content is kanji:

So we can draw a conclusion: when the browser parses our page, it treats this string of numbers as a word, so that it does not automatically cut off the string and wraps it.

Two. Workaround

①word-wrap:break-word (for example, div width 200px, its content will go to 200px Wrap)

②word-break:break-all (compared to the method above, the advantage of this method is that if there is a complete word in the critical section of the width range, it retains a complete word wrap)

Now let's test it.

So we can see the letters automatically line up!!!

About the cause and resolution of text overflow in div tag after setting width in Web site development