css完成持续的英文或数据全自动换行的方式

日期:2020-09-22 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

针对div
1.(IE访问器)white-space:normal; word-break:break-all;这里前者是遵照规范。

拷贝编码
编码以下:

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



拷贝编码
编码以下:

#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd1</div>

实际效果:能够完成换行

2.(Firefox访问器)white-space:normal; word-break:break-all;overflow:hidden;一样的FF下也沒有很好的完成方式,只能掩藏或加翻转条,自然不加翻转条实际效果更好!

拷贝编码
编码以下:

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



拷贝编码
编码以下:

#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111</div>

实际效果:器皿一切正常,內容掩藏
针对table

1. (IE访问器)应用款式table-layout:fixed;

拷贝编码
编码以下:

<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

实际效果:能够换行

2.(IE访问器)应用款式table-layout:fixed与nowrap

拷贝编码
编码以下:

<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

实际效果:能够换行

3. (IE访问器)在应用百分比固定不动td尺寸状况下应用款式table-layout:fixed与nowrap


拷贝编码
编码以下:

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

实际效果:两个td均一切正常换行

4.(Firefox访问器)在应用百分比固定不动td尺寸状况下应用款式table-layout:fixed与nowrap,而且应用div

拷贝编码
编码以下:

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

这里模块格宽度1定要用百分比界定
实际效果:一切正常显示信息,但不可以换行(注:在FF下都还没能使器皿內容换行的好方式,只能用overflow将多出的內容掩藏,以防危害总体实际效果)