所在位置:首页 > 学习心得 > CSS网页布局中 DIV和TABLE超出宽度自动换行
CSS网页布局中 DIV和TABLE超出宽度自动换行
  • CSS网页布局中 DIV和TABLE超出宽度自动换行
    发布时间:2010-10-27 类别:其他 来源:侠客工作室
    • 1
    • 2
    • 3
    • 4
    • 5
  •   自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,在54xiake.cn中不乏这方面的文章,现在总结一下CSS如何实现换行的方法,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

      对于div,p等块级元素
      正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行


     Example Source Code [www.54xiake.cn]
      html
      <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
      css
      #wrap{white-space:normal; width:200px; }

      IE浏览器
      连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行


     Example Source Code [www.54xiake.cn]
      html
      <div id="wrap">52csscom52csscom52csscom52csscom52csscom52csscom</div>
      css
      #wrap{word-break:break-all; width:200px;}

      或者


     Example Source Code [www.54xiake.cn]
      #wrap{word-wrap:break-word; width:200px;}

      Firefox浏览器
      连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条


     Example Source Code [www.54xiake.cn]
      html
      <div id="wrap">52csscom52csscom52csscom52csscom52csscom52csscom</div>
      css
      #wrap{word-break:break-all; width:200px; overflow:auto;}

      对于table元素

      IE浏览器

      一、使用 table-layout:fixed;强制table的宽度,多余内容隐藏


     Example Source Code [www.54xiake.cn]
    <table style="table-layout:fixed" width="200"><tr><td>52csscom52csscom52csscom52csscom52csscom52csscom</td></tr></table>

      二、使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行


     Example Source Code [www.54xiake.cn]
    <table width="200" style="table-layout:fixed;"><tr><td width="25%" style="word-break : break-all; ">52csscom52csscom52csscom52csscom52csscom52csscom</td><td style="word-wrap : break-word ;">52csscom52csscom52csscom52csscom52csscom52csscom</td></tr></table>

      三、在td,th中嵌套div,p等采用上面提到的div,p的换行方法

      Firefox浏览器

      一、使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者 word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用


     Example Source Code [www.54xiake.cn]
    <table style="table-layout:fixed" width="200"><tr>
    <td width="25%"    style="word-break : break-all; overflow:hidden; ">52csscom52csscom52csscom52csscom52csscom52csscom</td>
    <td width="75%" style="word-wrap : break-word; overflow:hidden; ">52csscom52csscom52csscom52csscom52csscom52csscom</td>
    </tr></table>

      二、在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。
      最佳CSS定义换行代码


     Example Source Code [www.54xiake.cn]
      .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }

     

  • ☆☆☆技术交流群:5684178☆☆☆
  • 上一篇:php168风格所需基本代码
  • 下一篇:ecshop调用指定分类下精品产品列表
侠客工作室主要承揽网站制作|企业建站|北京网站制作|北京网站建设|北京企业建站|专业仿站|SEO优化等业务
地址:北京市海定区清河水木天成 电话:13718388147 13718388147 传真:13718388147 访问统计:
投诉电话:13718388147 投诉QQ:点击这里给我发消息 客服信箱:1300105556@qq.com 邮编:102200 北京网站建设地图 北京网站建设RSS地图
版权所有 2009-2014侠客工作室【北京网站建设】 京ICP备11021494号-1