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 |