css自动换行

鸶雯

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是   CSS如何将他们换行的方法！     
   
  对于div     
   
  1.（IE浏览器）white-space:normal;   word-break:break-all;这里前者是遵循标准。   
   
   
    程序代码   
  #wrap{white-space:normal;   width:200px;   }   
  或者   
  #wrap{word-break:break-all;width:200px;}   
  <div   id="wrap">ddd1111111111111111111111111111111111</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;   }   
  <div   id="wrap">ddd1111111111111111111111111111111111111111</div>   
  效果：容器正常，内容隐藏     
   
  对于table     
   
  1.   (IE浏览器)使用样式table-layout:fixed；     
   
   
    程序代码   
  <style>   
  .tb{table-layout:fixed}   
  </style>   
  <table   class="tbl"   width="80">   
  <tr>   
  <td>abcdefghigklmnopqrstuvwxyz   1234567890   
  </td>   
  </tr>   
  </table>   
  效果：可以换行     
   
  2.(IE浏览器)使用样式table-layout:fixed与nowrap     
   
   
    程序代码   
  <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     
   
   
    程序代码   
  <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>   
  这里单元格宽度一定要用百分比定义     
   
  效果：正常显示，但不能换行