Home  >  Article  >  Web Front-end  >  Solve the problem that the browser cannot automatically wrap long numbers or long letters when displaying long numbers_html/css_WEB-ITnose

Solve the problem that the browser cannot automatically wrap long numbers or long letters when displaying long numbers_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:461173browse

In a web page, if long numbers or long letter combinations appear, if not controlled, it will destroy the layout of the web page. If not controlled well, the display may be incomplete and the displayed data will be lost. Although this kind of string generally does not appear, if it is not controlled and some intentional people take advantage of it, it may destroy the layout of the entire web page. The gain outweighs the loss. Today I will solve this problem.

First look at what the problem is:

For example:

111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11

abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd

Have you given the layout of the blog park? Ruined? ?

Then analyze the reason for this problem:

Personally think that

long numbers and long letters are considered to be one word , An truth, one word It shouldn't be split. It needs to be displayed all the time. After it is split, no one will recognize it, so the browser will not let you wrap the line, and the layout will be destroyed!

Then I tried the flash memory in the blog park to see if this problem would occur, and found that Google Chrome was normal

Looking at the code, it was word- wrap: break-word; What this sentence does is that

the content will wrap within the boundary

will look like this after being removed

It seems that our problem has been solved, but the IE browser is not so good, please see the picture below:

No change, just a big long bar numbers, no line breaks!

The solution is:

Just add a

tag outside the long number

Please see what the solved IE looks like:

What Google Chrome looks like:

Perfect solution!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn