How to use word-wrap to solve the problem of text overflow

The width of p is clearly limited, but when typing aaaaaaaaaaa... etc., it does not automatically wrap. I checked and found no problem. It turns out that it is (consecutive letters will be treated as one word). Foreigners think that a word should not wrap. , the solution given below:

word-break:break-all and word-wrap:break-word

Word-break:break-all and word-wrap:break-word are often used to solve the problem of line wrapping in long strings.

After a series of tests, it was found that word-break:break-all was the same in IE6/7/chrome/safari, which showed tail truncation, while ff3.0/opera showed that it was invalid. Words that are too long are displayed in new lines and then overflow the boundary.

Word-wrap:break-word; is the same in IE6/7/chrome/safari. It behaves like long words are wrapped into new lines, and then they are cropped if they cannot be displayed any longer. And ff3.0/opera also appears to be invalid

Obviously word-wrap:break-word; is more in line with the user experience, and word-break:break-all can be ignored. Foreigners don’t like to cut English words into pieces. For ff3.0 and opera, it can only be hidden with overflow-x:hidden (ff3.5 already supports this attribute).

So here is the suggestion

　word-wrap:break-word;overflow-x:hidden;width:500px;

The above is the detailed content of How to use word-wrap to solve the problem of text overflow. For more information, please follow other related articles on the PHP Chinese website!