頁面的強(qiáng)制換行問題總結(jié)

2024-04-27 13:55:18

字體：大中小

供稿：網(wǎng)友

如果想要一個table固定大小，里面的文字強(qiáng)制換行(尤其是在一長串英文文本，并且中間無空格分隔的情況下)，以達(dá)到使過長的文字不撐破表格的目的，一般是使用樣式：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瀏覽器)在使用數(shù)值固定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>

效果：

不幸發(fā)生了，第一個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瀏覽器)在使用數(shù)值固定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>

效果：