Tips for realizing automatic line wrapping when making CSS web pages
Author：Eve Cole
Update Time：2025-01-15 17:00:16
Tips for realizing automatic line wrapping when making CSS web pages Friday, March 6, 2009 10:47 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. method!
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;}eg.<div id="wrap">ddd11111111111111111111111111111111</div>Effect: Line wrapping can be achieved 2. (Firefox browser) white-space:normal; word -break:break-all;overflow:hidden; Similarly, there is no good implementation method in FF. You can only 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; }eg.<div id="wrap">ddd111111111111111111111111111111111111111</div> Effect: The container is normal and the content is hidden for table 1. (IE browser ) use style table-layout:fixed;
eg.<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 the style table-layout: fixed and nowrapeg.<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 http://www.knowsky.com/
.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. 3. (Firefox browser) When using percentage to fix the td size, use the styles table-layout: fixed and nowrap, and use diveg.<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 the container content under FF. You can only use overflow to hide the extra content to avoid affect the overall effect)
