CSS 之强制性换行技能

2021-01-20 14:05 jianzhan
针对div

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

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

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

eg.
<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; }

eg.

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

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

针对table

1. (IE访问器)应用款式table-layout:fixed;
eg.
<style>
.tb{table-layout:fixed}
</style>

<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

实际效果:能够换行

2.(IE访问器)应用款式table-layout:fixed与nowrap
eg.
<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均一切正常换行

3.(Firefox访问器)在应用百分比固定不动td尺寸状况下应用款式table-layout:fixed与nowrap,而且应用div
eg.
<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将多出的內容掩藏,以防危害总体实际效果)