Tips for realizing automatic line wrapping with CSS

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; the former here follows the standard.

#wrap{white-space:normal; width:200px; }
or
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

Effect: Line breaks can be achieved

2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; There is no good implementation method under the same FF. You can only hide or add scroll bars, but of course no scroll bars. The effect is better!

#wrap{white-space:normal; width:200px; overflow:auto;}
or
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd111111111111111111111111111111111111111</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 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: Line breaks can be made

3. (IE browser) Use the style table-layout: fixed and nowrap when using a percentage to fix the td size.

<style>
.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 style table-layout: fixed and nowrap when using 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 as a percentage: it displays normally, but cannot wrap.

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.