Chinaunix首页 | 论坛 | 博客
  • 博客访问: 423077
  • 博文数量: 155
  • 博客积分: 2590
  • 博客等级: 少校
  • 技术积分: 2161
  • 用 户 组: 普通用户
  • 注册时间: 2012-10-25 09:33
文章分类

全部博文(155)

文章存档

2015年(1)

2014年(2)

2013年(55)

2012年(97)

分类: Html/Css

2013-01-04 14:05:42

对于div,p等块级元素 
    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行: 
html 
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义
 
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;} 
   
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
 
    效果:可以实现换行 
 
    2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条 
    #wrap{word-break:break-all; width:200px; overflow:auto;} 
 
   
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
 
 
    效果:容器正常,内容隐藏 
 
    对于table 
    1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏 
 
 
 
 
 
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss 
 
 
    效果:隐藏多余内容 
 
    2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行 
 
 
 
 
 
 
abcdefghigklmnopqrstuvwxyz 1234567890 
abcdefghigklmnopqrstuvwxyz 1234567890 
 
 
    效果:可以换行 
 
    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;无法起作用 
 
 
 
 
 
 
abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890
 
 
    效果:隐藏多于内容 
 
    5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框。最后,这种现象出现的几率很小。
原文来自css+div教程:
阅读(772) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~