<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">The program to eliminate right-click copying.
This article introduces how to use css to make English text automatically wraps. 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!
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. The following are introduced separately:
For div
1. (IE browser) white-space:normal; word-break:break-all; Here is the former It follows the standard:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#wrap{white-space:normal; width:200px; }
or:
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>
Effect: Automatic line wrapping can be achieved
2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; also not available under the same FF A very good implementation method. You can only hide or add scroll bars. Of course, the effect is better without adding scroll bars!
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#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
http://font.knowsky.com/
For table
1. (IE browser) use the style table-layout:fixed:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Effect: Automatic line wrapping
2. (IE browser) use style:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
Effect: Automatic line wrapping
3. (IE browser) Use the style table-layout:fixed and nowrap when using percentage to fix the td size:
div css xhtml xml Example Source Code Example Source Code [www.52css.com ]
<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 automatically wrap normally
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]
<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.