CSS--How to force text to be wrapped

　　

When we were writing HTML,

Sometimes it is often necessary to use some table properties on the mobile side to present some data. If we say that there are no consecutive numbers or letters in our data, the display will not be error-free.

Cases:

But this is often the case if we want to present data that is numeric or long-letter information.

Cases:

　　

The text does not wrap as we expected, and the width of the setting is not valid.

What is the reason for this?

The reason is that when the browser is parsing our page, if we give him consecutive numbers or letters, the browser will not parse separately, but will directly use this long string as a word , so we set the width is invalid, does not automatically cut off the string and line wrapping.

Solution:

If we want the text in the table to force a newline (especially in the case of a long string of English text and no space between them), in order to make the text that is too long to break the table, you need to add the following two lines of code to the style:

1 Word-wrap:break-word; 2 Word-break:break-all;

What's the use of these two lines of code?

Word-wrap:break-word; and Word-break:break-all parsing:

1,word-break:break-all

Allows line wrapping within a word. Given a div width, characters that are longer than the specified width are automatically wrapped. If there is an English word at the end of the line that is long (confidence, etc.), it truncates the word to the end of the line as con (the first half of the confidence), and the next behavior fidence (the back part of Fidence).

2,word-wrap:break-word

Allow long words to wrap to the next line. The example is the same as above, but the difference is that it will confidence the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line without truncating the word.

Compatibility issues:

Both the Word-break and Word-wrap properties support all major browsers.

　　　　

CSS--How to force text to be wrapped