CSS to achieve continuous English or digital automatic line wrapping method

For Div

1. (ie browser) white-space:normal; Word-break:break-all, where the former is to follow the standard.

The

code is as follows:


#wrap {white-space:normal; width:200px;}

Or

The
code is as follows:


#wrap {word-break:break-all;width:200px}


<div id= "wrap" >ddd1111111111111111111111111111111111</div>

Effect: You can implement 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, without the scroll bar effect better!

The
code is as follows:


#wrap {white-space:normal; width:200px; overflow:auto;}

Or

The
code is as follows:


#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;

The
code is as follows:


<style>


. tb{table-layout:fixed}


</style>


<table class= "tbl" width= ">
"

<tr>


<td>abcdefghigklmnopqrstuvwxyz 1234567890


</td>


</tr>


</table>

Effect: You can change lines

2. (ie browser) use style table-layout:fixed and nowrap

The
code is as follows:


<style>


. TB {table-layout:fixed}


</style>


<table class= "TB" width= ">
"

<tr>


<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890


</td>


</tr>


</table>

Effect: You can change lines

3. (ie browser) using a percentage fixed TD size case use style table-layout:fixed and nowrap

The

code is as follows:


<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 all normal line change

4. (Firefox browser) using a percentage fixed TD size case use style table-layout:fixed and nowrap, and use div

The

code is as follows:


<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 in percent
Effect: normal display, but can not wrap (note: Under FF has not been able to make the container content of a good way, can only use overflow will be more out of the content to hide, so as not to affect the overall effect)