Summary of forced line wrapping on a page

Issues | page

If you want a table fixed size, the inside text is forced to wrap (especially in a long string of English text, and there is no space between the case), in order to make the long text does not break the purpose of the table, is generally the use of style: Table-layout:fixed. But under Firefox, there will be some problems, refer to some of Gmail's practices, do a few tests, come up with a solution.

If you want a table fixed size, the inside text is forced to wrap (especially in a long string of English text, and there is no space between the case), in order to make the long text does not break the purpose of the table, is generally the use of style: Table-layout:fixed. But under Firefox, there will be some problems, refer to some of Gmail's practices, do a few tests, come up with a solution.

Example 1: (ie browser) general situation

<table border=1 width=80>
  <tr>
    <TD>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
    </td>
  </tr>
</table>

Effect:
You can see that the width=80 doesn't work and the form is propped up.

Example 2: (ie browser) use style table-layout:fixed

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
  <tr>
    <TD>ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890
    </td>
  </tr>
</table>

Effect:
The width=80 works, but the table wraps.

Example 3: (ie browser) using styles table-layout:fixed and nowrap

<style>
. tbl {table-layout:fixed}
</style>

<table class=tbl border=1 width=80>
  <tr>
    <TD nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
    </td>
  </tr>
</table>

Effect:
The width=80 worked, and the line was killed.

Example 4: (ie browser) using a value fixed TD size with a style table-layout:fixed and 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>

Effect:
Unfortunately, the first TD's nowrap didn't work.

Example 5: (ie browser) using a percentage fixed TD size with a style table-layout:fixed and 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>

Effect:
Change it to a percentage, finally it's done.

Example 6: (Firefox browser) uses the style table-layout:fixed and nowrap effect when using a percentage fixed TD size :
Put example 5 under Firefox, and then Ft.

Example 7: (Firefox browser) uses the style table-layout:fixed and nowrap with a percentage fixed TD size, and uses 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>

Effect:
The world is finally in peace.

Example 8: (Firefox browser) use style table-layout:fixed and nowrap with value fixed TD size, and use 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>

Effect:
NoWrap's not working anymore.

In the end, example 7 is a solution that is perfect for both IE and Firefox to solve the problem of page-forced wrapping.