This article lists recommended CSS styles for line breaks that are compatible with IE and FF, and introduces in detail the differences between word-wrap and word-break. Recommended CSS styles for line breaks that are compatible with IE and FF:
The best way is
word-wrap:break-word; overflow :hidden;
instead of
word-wrap:break-word; word-break:break-all;
nor
word-wrap:break-word; overflow:auto;
This is the best way. There is no problem under IE. Under FF, a long string of English words will be blocked.
Technical summary:
word-wrap is used to control line breaks.
When break-word is used, line breaks are forced. There is no problem with Chinese, and there is no problem with English sentences. But for long If you string English words, it will not work.
break-word controls whether to break words.
normal is the default situation, English words are not split.
break-all, breaks words. When the word reaches the boundary, the next letter is automatically Go to the next line. Mainly solves the problem of long strings of English words.
keep-all refers to Chinese, Japanese, and Korean continuous words. That is, only use this time, without word-wrap, and Chinese will not wrap. (English sentences are normal. .)
Under IE:
Use word-wrap:break-word; everything is normal.
Under FireFox:
If these two are not used, there will be no problem with Chinese. There will be no problem with English sentences. However, long strings There will be problems in English.
In order to solve long strings of English, word-wrap:break-word;word-break:break-all; is generally used. However, this method will cause the words in ordinary English sentences to be broken (IE The same is true below).
The current main problem is that long strings of English and English words are disconnected. In fact, a long string of English is just a relatively long word. That is, should English words be disconnected? The problem is obvious, and it obviously should not be disconnected. For long strings of English, which are malicious things, naturally there is no need to worry about it. However, we must also think of some ways to prevent it from expanding the container.
Use: overflow: auto; Under IE, long strings will automatically wrap. Under FireFox, long strings will be covered.
So, in summary, the best way is word-wrap:break-word;overflow:hidden; rather than word-wrap:break -word;word-break:break-all;.
word-wrap:break-word;overflow:auto; There is no problem under IE. Under FireFox, part of the long string will be obscured.