如果想要一個(gè)table固定大小,里面的文字強(qiáng)制換行(尤其是在一長串英文文本,并且中間無空格分隔的情況下),以達(dá)到使過長的文字不撐破表格的目的,一般是使用樣式:。但是在Firefox下面,會(huì)有一些問題,參考Gmail的一些做法,做了幾個(gè)測試,得出一種解決辦法。
例1:(IE瀏覽器)普通的情況
<table border=1 width=80>效果:
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
例2:(IE瀏覽器)使用樣式
<style>效果:
.tbl {}
</style>
<table class=tbl border=1 width=80>
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
例3:(IE瀏覽器)使用樣式與nowrap
<style>效果:
.tbl {}
</style>
<table class=tbl border=1 width=80>
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
例4:(IE瀏覽器)在使用數(shù)值固定td大小情況下使用樣式與nowrap
<style>效果:
.tbl {}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
例5:(IE瀏覽器)在使用百分比固定td大小情況下使用樣式與nowrap
<style>效果:
.tbl {}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
例6:(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式與nowrap效果:
例7:(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式與nowrap,并且使用div
<style>效果:
.tbl {}
.td {overflow:hidden;}
</style>
<table class=tbl border=1 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>
例8:(Firefox瀏覽器)在使用數(shù)值固定td大小情況下使用樣式與nowrap,并且使用div
<style>效果:
.tbl {}
.td {overflow:hidden;}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=20 class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
最終,例7是一個(gè)在IE和Firefox都可以完美解決頁面強(qiáng)制換行問題的解決方案。