HTML連續英文字串強制換行

如果想要一個table固定大小，裡面的文字強制換行(尤其是在一長串英文文本，並且中間無空格分隔的情況下)，以達到使過長的文字不撐破表格的目的，一
般是使用樣式：table-layout:fixed。但是在Firefox下面，會有一些問題，參考Gmail的一些做法，做了幾個測試，得出一種解決
辦法。

如
果想要一個table固定大小，裡面的文字強制換行(尤其是在一長串英文文本，並且中間無空格分隔的情況下)，以達到使過長的文字不撐破表格的目的，一般
是使用樣式：table-layout:fixed。但是在Firefox下面，會有一些問題，參考Gmail的一些做法，做了幾個測試，得出一種解決辦
法。

例1：(IE瀏覽器)普通的情況

<table border=1 width=80>

<tr>

<td>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

效果：
可以看到width=80並沒有起作用，表格被字元撐開了。

例2：(IE瀏覽器)使用樣式table-layout:fixed

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

<tr>

<td>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

效果：
width=80起作用了，但是表格換行了。

例3：(IE瀏覽器)使用樣式table-layout:fixed與nowrap

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

<tr>

<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

效果：
width=80起作用了，換行也被幹掉了。

例4：(IE瀏覽器)在使用數值固定td大小情況下使用樣式table-layout:fixed與nowrap

<style>

.tbl {table-layout:fixed}

</style>



<table class=tbl border=1 width=80>

<tr>

<td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

效果：
不幸發生了，第一個td的nowrap不起作用了

例5：(IE瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

<style>

.tbl {table-layout:fixed}

</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大小情況下使用樣式table-layout:fixed與nowrap效果：
把例5放到firefox下面，又ft了

例7：(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

<style>

.tbl {table-layout:fixed}

.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瀏覽器)在使用數值固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

<style>

.tbl {table-layout:fixed}

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

效果：
nowrap又不起作用了

最終，例7是一個在IE和Firefox都可以完美解決頁面強制換行問題的解決方案。

Reference: http://www.simplelife.cn/blog/index.php?op=ViewArticle&articleId=115&blogId=1