css (word-wrap/break) makes pure English numbers automatically wrap

This article mainly introduces how css (word-wrap/break) makes pure English numbers automatically wrap. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Both IE and FF will expand the container and will not automatically wrap. When numbers or English characters contain Chinese characters, they will wrap from the Chinese characters. However, pure Chinese characters can automatically wrap. To address this problem, this article provides a detailed solution. , interested friends should not miss it, I hope this article will be helpful to you

When a block element with a defined width is filled with pure English or pure numbers, in IE and FF The container will be enlarged and will not wrap automatically. When numbers or English words contain Chinese characters, they will wrap from the Chinese characters. However, pure Chinese characters can wrap automatically. How to solve this problem? Let’s first get to know the two protagonists word-wrap and word-break
word-wrap is used to control line breaks
Two values:
(1)normal
(2 )break-word (This value is used to force line breaks. The content will break within the boundaries. There is no problem with Chinese and English sentences. But for long strings of English, it will not work.)
word -break is used to control the three values ​​of word break
:
(1)normal
(2)break-all (is to break the word. When the word reaches the boundary, the next letter automatically Go to the next line. Mainly solves the problem of long English strings.)
(3)keep-all (referring to Chinese, Japanese, and Korean continuous words, one sentence per line, which can be used to arrange ancient poems~)
[Solution]
You can add

word-wrap:break-word;
word-break:break-all;

(1)break-all (is to break the word. When the word reaches the boundary, the next letter automatically Go to the next line. Mainly solves the problem of long English strings.)
(2)keep-all (referring to Chinese, Japanese, and Korean continuous words, one sentence per line, which can be used to arrange ancient poems~)
(3)break-word (This value is used to force line breaks, and the content will break within the boundaries. There is no problem with Chinese, and there is no problem with English sentences. But for long strings of English, it will not work.)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The difference between word-break, word-wrap, and white-space in forced line breaks in css

The above is the detailed content of css (word-wrap/break) makes pure English numbers automatically wrap. For more information, please follow other related articles on the PHP Chinese website!