<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" marginheight="0" marginwidth="0">Eliminate right-click copy program This article introduces how to use CSS to automatically wrap English text. 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 CSS can wrap them automatically! 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 CSS can automatically wrap them! For Div and table and different browsers, the methods to implement CSS automatic line wrapping are slightly different. They are introduced below: for div 1. (IE browser) white-space:normal; word-break:break-all; here the former follows the standard: div css xhtml xml Example Source Code Example Source Code [www.52css.com] or: #wrap{word-break:break-all;width:200px;} Effect: automatic line wrapping can be achieved 2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; There is also no good implementation method in FF. You can only hide or add scroll bars, but of course no scroll bars. The effect is better! div css xhtml xml Example Source Code Example Source Code [www.52css.com] or: #wrap{word-break:break-all;width:200px; overflow:auto; } Effect: The container is normal and the content is hidden 1. (IE browser) Use the style table-layout:fixed: div css xhtml xml Example Source Code Example Source Code [www.52css.com] Effect: Automatically wrap lines 2. (IE browser) usage style: div css xhtml xml Example Source Code Example Source Code [www.52css.com] Effect: Automatically wrap lines 3. (IE browser) Use the style table-layout:fixed and nowrap when using a percentage to fix the td size: div css xhtml xml Example Source Code Example Source Code [www.52css.com] Effect: Both TDs wrap normally and automatically 4. (Firefox browser) Use the style table-layout: fixed and nowrap when using percentage to fix the td size, and use div: div css xhtml xml Example Source Code Example Source Code [www.52css.com] The cell width here must be defined as a percentage: it displays normally, but cannot wrap.
#wrap{white-space:normal; width:200px; }
<div id="wrap">ddd111111111111111111111111111111</div>
#wrap{white-space:normal; width:200px; overflow:auto;}
<div id="wrap">ddd111111111111111111111111111111111111111</div>
http://font.knowsky.com/
for table
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
<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>
<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>