Automatic line wrapping problem, line wrapping of normal characters is more reasonable, but continuous numbers and English characters often expand the container, which is quite a headache. The following is how to implement line wrapping in CSS.
For block-level elements such as div and p, normal text wrapping (Asian text and non-Asian text) elements have the default white-space:normal, and they will automatically wrap after the defined width.
html
<div id="wrap">Normal text wrapping (Asian 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 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;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effect: Line breaks can be achieved
2. (Firefox browser) The line breaks of continuous English characters and Arabic numerals. All versions of Firefox do not solve this problem. We can only hide the characters that exceed the boundary or add scroll bars to the container.
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effect: The container is normal and the content is hidden for the table
(1)(IE browser) use table-layout:fixed; force the width of the table and hide excess content
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
Effect: Hide redundant 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
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Effect: Line breaks can be made
3. (IE browser) When nesting div, p, etc. in td, th, use 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 uses word-break: break-all; or word-wrap: break-word; wrap lines, use overflow: hidden; to hide Beyond the content, overflow:auto; cannot work here
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
Effect: hide more than content
5. (Firefox browser) Nest div, p, etc. in td, th, etc. Use the method mentioned above to deal with Firefox