<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" > Remove right click Copy Program
This article describes how to use CSS to make English text automatically wrap, we all know that the continuous English or digital can be a container is propped up, can not be based on the size of the container to automatically wrap, the following is how CSS will be their automatic line wrapping Method!
We all know that the continuous English or digital can be the container is propped up, can not be based on the size of the container automatically line, the following is how CSS will be their automatic line wrapping Method! For Div and table as well as different browsers, the implementation of CSS automatic wrapping method is slightly different, described below:
For Div
1. (ie browser) white-space:normal; Word-break:break-all: The former is following 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: You can implement automatic line wrapping
2. (Firefox browser) white-space:normal; Word-break:break-all;overflow:hidden, the same FF also does not have a good implementation method, can only hide or add scroll bar, of course, no scroll bar effect better!
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" >ddd1111111111111111111111111111111111111111</div>
Effect: Container normal, content hidden
For table
1. (ie browser) use 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= ">"
<tr><td>
ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
</td></tr>
</table>
Effects: Wrapping can be wrapped automatically
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= "><TR><TD nowrap>"
ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
</td></tr>
</table>
Effects: Wrapping can be wrapped automatically
3. (ie browser) using a percentage fixed TD size with the style table-layout:fixed and nowrap:
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: Two TD are normal automatic line wrapping
4. (Firefox browser) using a percentage fixed TD size case use style table-layout:fixed and nowrap, 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>
Here the cell width must be defined as a percentage effect: The display is normal, but the line cannot be wrapped.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
