小鎮(zhèn)樹妖--住在樹上的妖

          To follow the path: look to the master, follow the master, walk with the master, see through the master, become the master.

            BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
            10 Posts :: 50 Stories :: 7 Comments :: 0 Trackbacks

          大家都知道連續(xù)的英文或數(shù)字能是容器被撐大,不能根據(jù)容器的大小自動(dòng)換行,下面是 CSS如何將他們換行的方法!

          對于div

          1.(IE瀏覽器)white-space:normal; word-break:break-all;這里前者是遵循標(biāo)準(zhǔn)。

          #wrap{white-space:normal; width:200px; }
          或者
          #wrap{word-break:break-all;width:200px;}
          <div id="wrap">ddd1111111111111111111111111111111111</div>

          效果:可以實(shí)現(xiàn)換行

          2.(Firefox瀏覽器)white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實(shí)現(xiàn)方法,只能隱藏或者加滾動(dòng)條,當(dāng)然不加滾動(dòng)條效果更好!

          #wrap{white-space:normal; width:200px; overflow:auto;}
          或者
          #wrap{word-break:break-all;width:200px; overflow:auto; }
          <div id="wrap">ddd1111111111111111111111111111111111111111</div>
          效果:容器正常,內(nèi)容隱藏

          對于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>
          效果:兩個(gè)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>
          這里單元格寬度一定要用百分比定義

          效果:正常顯示,但不能換行(注:在FF下還沒有能使容器內(nèi)容換行的好方法,只能用overflow將多出的內(nèi)容隱藏,以免影響整體效果)

          posted on 2006-09-06 14:51 jacky wu 閱讀(192) 評論(0)  編輯  收藏 所屬分類: Web(asp, javascript, css ...)
          主站蜘蛛池模板: 五常市| 随州市| 普格县| 阳曲县| 淮安市| 开远市| 攀枝花市| 莎车县| 平定县| 策勒县| 毕节市| 游戏| 卫辉市| 普格县| 墨玉县| 秀山| 泰州市| 集贤县| 宣恩县| 阿拉尔市| 阿巴嘎旗| 德州市| 泰州市| 牙克石市| 香港| 盐边县| 广州市| 咸宁市| 柘城县| 监利县| 景东| 大渡口区| 沈丘县| 永寿县| 神农架林区| 双鸭山市| 平顺县| 鹤岗市| 南阳市| 宜君县| 新密市|