Use CSS to realize automatic line wrapping of pure English numbers

The following is a simple implementation of CSS code to automatically wrap pure English numbers. The content is quite good, so I will share it with you now and give it as a reference.

When a block element with a defined width is filled with pure English or pure numbers, the container will be enlarged in IE and FF and will not automatically wrap.

And when When there are numbers or Chinese characters in English, the lines will wrap from the Chinese characters, but 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 css line breaks

Two values:

(1) normal
(2) break-word (This value is used to force line breaks, and the content will be at the boundary There is no problem with line breaks in Chinese, and there is no problem with English sentences. But for long strings of English, it does not work.)

word-break is used to control word break

Three values:

(1)normal

(2)break- all (It is to break the word. When the word reaches the boundary, the next letter automatically goes to the next line. It 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;

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

Related recommendations:

How to use CSS to maintain the aspect ratio of page content

About the unit vw and css3 Use of vh

The above is the detailed content of Use CSS to realize automatic line wrapping of pure English numbers. For more information, please follow other related articles on the PHP Chinese website!