新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

2.07日音讯,解决div等换行小问题

发布日期:2014-02-07文章来源:首创网络浏览次数:1107次
    2.07日音讯,解决div等换行小问题。换行对于中文来讲不是什么大的问题,因为中文对于换行处理的很好,而且也是遵规遵距的,但是对于字母,它的处理方式就不太好了,虽是小问题,但却是让人挠头的。今天邯郸网站建设......
    本文关键字:2.07日,音讯,解决,div,等,换行,小,问题,2.07日,
  2.07日音讯,解决div等换行小问题。换行对于中文来讲不是什么大的问题,因为中文对于换行处理的很好,而且也是遵规遵距的,但是对于字母,它的处理方式就不太好了,虽是小问题,但却是让人挠头的。今天邯郸网站建设首创网络就来和大家一起讨论下,希望对于大家能够有所帮助。
  正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
  html
  复制代码代码如下:
  <divid="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
  css
  复制代码代码如下:
  #wrap{white-space:normal;width:200px;}
  1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap:break-word;或者word-break:break-all;实现强制断行
  复制代码代码如下:
  #wrap{word-break:break-all;width:200px;}
  或者
  #wrap{word-wrap:break-word;width:200px;}
  <divid="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
  效果:可以实现换行
  2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
  复制代码代码如下:
  #wrap{word-break:break-all;width:200px;overflow:auto;}
  <divid="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
  效果:容器正常,内容隐藏
  对于table
  1.(IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容隐藏
  复制代码代码如下:
  <tablestyle="table-layout:fixed"width="200">
  <tr>
  <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
  </td>
  </tr>
  </table>
  效果:隐藏多余内容
  2.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break:break-all;或者word-wrap:break-word;换行
  复制代码代码如下:
  <tablewidth="200"style="table-layout:fixed;">
  <tr>
  <tdwidth="25%"style="word-break:break-all;">abcdefghigklmnopqrstuvwxyz1234567890
  </td>
  <tdstyle="word-wrap:break-word;">abcdefghigklmnopqrstuvwxyz1234567890
  </td>
  </tr>
  </table>
  效果:可以换行
  3.(IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
  4.(Firefox浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break:break-all;或者word-wrap:break-word;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
  复制代码代码如下:
  <tablestyle="table-layout:fixed"width="200">
  <tr>
  <tdwidth="25%"style="word-break:break-all;overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
  <tdwidth="75%"style="word-wrap:break-word;overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td>
  </tr>
  </table>
  效果:隐藏多于内容
  5.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
  最后,这种现象出现的几率很小。
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市丛台区颐高广场B座13层1304室