Everyone knows that continuous English or numbers can make the container expand and cannot automatically wrap according to the size of the container. Here is how to wrap them using CSS!
For div
1. (IE browser) white-space:normal; word-break:break-all; here the former follows the standard.
#wrap{white-space:normal; width:200px; }
or
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>
Effect: Line break can be achieved
2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; The same FF does not have much A good implementation method is to hide or add scroll bars. Of course, it is better not to add scroll bars!
#wrap{white-space:normal; width:200px; overflow:auto;}
or
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd11111111111111111111111111111111111111111</div>
Effect: The container is normal and the content is hidden.
For table
1. (IE browser) use the style table-layout:fixed;
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Effect: can wrap lines
http://www.knowsky.com/
2. (IE browser) use style
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Effect: can wrap
3. (IE browser) use the style table-layout:fixed and nowrap<style>
when using percentage to fix the td size
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
Effect: Both tds wrap normally
4. (Firefox browser) Use the styles table-layout: fixed and nowrap when using a percentage to fix the td size, and use div
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>
The cell width here must be defined in percentage. The effect is: normal display, but no line wrapping.
Note: There is no good way to wrap container content under FF. You can only use overflow to hide the extra content to avoid affecting the overall effect.