小鎮樹妖--住在樹上的妖

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

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            10 Posts :: 50 Stories :: 7 Comments :: 0 Trackbacks

          常用鏈接

          留言簿(3)

          我參與的團隊

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 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>
          這里單元格寬度一定要用百分比定義

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

          posted on 2006-09-06 14:51 jacky wu 閱讀(191) 評論(0)  編輯  收藏 所屬分類: Web(asp, javascript, css ...)
          主站蜘蛛池模板: 邹城市| 宝鸡市| 义马市| 玛纳斯县| 亳州市| 江孜县| 龙南县| 龙陵县| 佛冈县| 贵州省| 渭南市| 靖远县| 土默特右旗| 曲阳县| 呼和浩特市| 双鸭山市| 怀远县| 苏尼特左旗| 克东县| 三明市| 米脂县| 巩义市| 台东县| 思茅市| 惠安县| 镇安县| 潢川县| 右玉县| 普宁市| 阿勒泰市| 宣城市| 金沙县| 应用必备| 南雄市| 沁源县| 绥滨县| 永修县| 阳江市| 长寿区| 新化县| 南江县|