How to automatically wrap long English letters in div CSS? _html/css_WEB-ITnose

Automatic line wrapping problem. Line wrapping of normal characters is more reasonable, but continuous numbers and English characters often stretch the container, which is quite a headache. The following is how to implement line wrapping in CSS.

The best CSS definition line break code

.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
Here overflow:hidden; or auto ; For block-level elements such as div and p
, the line wrapping of normal text (Asian and non-Asian text) elements has the default white-space: normal, and it will automatically wrap after the defined width
html

Normal text wrap (Asian text and non-Asian text) elements have the default white-space:normal, when defined

css
#wrap{white-space:normal; width:200px; }

1. (IE browser) For continuous English characters and Arabic numerals, use word-wrap: break-word; or word-break:break-all; to achieve forced line breaking

#wrap{ word-break:break-all; width:200px;}
or
#wrap{word-wrap:break-word; width:200px;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect : Line breaks can be achieved

2. (Firefox browser) Line breaks for continuous English characters and Arabic numerals. All versions of Firefox do not solve this problem. We can only hide the characters beyond the boundary or add them to the container. Scroll bar

#wrap{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effect: The container is normal and the content is hidden

For table
1. (IE browser) use table-layout:fixed; force the width of the table and hide excess content

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effect: hide excess content

2. (IE browser) use table-layout: fixed; to force the width of the table, the inner td, th use word-break: break-all; or word-wrap: break-word; line break

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Effect: Line wrapping is possible

3. (IE browser) Nesting div, p, etc. in td, th uses the line wrapping method of div and p mentioned above

4. (Firefox browser) Use table-layout: fixed; to force the width of the table, the inner td, th use word-break: break-all; or word-wrap: break-word; wrap the line, use overflow: hidden; hide the excess content , here overflow:auto; does not work

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

Effect: more content is hidden

5. (Firefox browser) Use the above to nest divs, p, etc. in td, th The mentioned method to deal with Firefox
Run the code box
Finally, the chance of this phenomenon occurring is very small, but the prank by netizens cannot be ruled out.

The following is the effect of the mentioned example

div All white-space:normal;

Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario

IE word-wrap : break-word ;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

IE word-break :break-all;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Firefox/ word-break:break-all; overflow:auto; ;

table-layout:fixed; word -break : break-all; word-wrap : break-word ;

FF table-layout:fixed; overflow:hidden;

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890