The code and method of the css tutorial for automatic wrapping for div, p, and other block-level elements
The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, automatically wrap after the defined width
Html
<Id = "wrap"> normal text wrap (Asian text and non-Asian text) elements have the default white-space: normal, when defined </div>
Css
# Wrap {white-space: normal; width: 200px ;}
1. (ie browser) for continuous English characters and Arabic numbers, use word-wrap: break-word; or word-break: break-all; to implement forced line disconnection
# Wrap {word-break: break-all; width: 200px ;}
Or
# Wrap {word-wrap: break-word; width: 200px ;}
<Id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>
Effect: line breaks can be implemented.
2. (firefox) continuous disconnection of English characters and Arabic numbers. All firefox versions do not solve this problem. We only need to hide the characters that exceed the boundary or add a scroll bar to the container.
# Wrap {word-break: break-all; width: 200px; overflow: auto ;}
<Id = "wrap"> abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111 </div>
Effect: The container is normal and the content is hidden.
For table
1. (ie browser) use table-layout: fixed; to force the width of the table and hide unnecessary content.
<Style = "table-layout: fixed" width = "200">
<>
<> Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</Td>
</Tr>
</Table>
Effect: hide unnecessary content
2. (ie browser) use table-layout: fixed; to force the width of the table, use word-break: break-all in the td and th layers, or use word-wrap: break-word to wrap the line.
<Width = "200" style = "table-layout: fixed;">
<>
<Width = "25%" style = "word-break: break-all;"> abcdefghigklmnopqrstuvwxyz 1234567890
</Td>
<Style = "word-wrap: break-word;"> abcdefghigklmnopqrstuvwxyz 1234567890
</Td>
</Tr>
</Table>
Effect: line breaks are supported.
3. (ie browser) embedding div and p in td and th adopts the wrap method of div and p mentioned above.
4. (firefox) use table-layout: fixed; to force the width of the table, use word-break: break-all, or word-wrap: break-word to form a new line, use overflow: hidden; hide the content that exceeds the limit. Here overflow: auto; cannot work.
<Style = "table-layout: fixed" width = "200">
<>
<Width = "25%" style = "word-break: break-all; overflow: hidden;"> abcdefghigklmnopqrstuvwxyz1234567890 </td>
<Width = "75%" style = "word-wrap: break-word; overflow: hidden;"> abcdefghigklmnopqrstuvwxyz1234567890 </td>
</Tr>
</Table>
Effect: hide more than content
5. (firefox browser) nesting div and p in td and th using the methods mentioned above to deal with firefox