注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云淡风轻

云淡风轻近午天,傍花随柳过前川。

 
 
 

日志

 
 

CSS分行显示  

2008-01-11 10:19:16|  分类: 格物致知 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

white-space版本:CSS1  兼容性:IE5.5+ NS4+ 继承性:有语法:
 white-space : normal | pre | nowrap
 参数:
 normal :  默认处理方式
pre :  用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
说明:
设置或检索对象内空格的处理方式。
对应的脚本特性为whiteSpace
示例:
p { white-space: nowrap; }

这个只适用于汉字的分行。对于一长串中间没有空格的英文字母,firefox还是无能为力的。
而ie还有另外两个属性:word-break和word-wrap。两个的区别似乎只有继承性了。另外,word-wrap是CSS3.0的标准里的属性,不过firefox只支持到CSS2.0。据说这个已经在firefox的bug数据库里放了5年了。。。。

word-wrap版本:IE5.5+专有属性 继承性:有
语法:
word-wrap : normal | break-word
参数:
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
对应的脚本特性为wordWrap。请参阅我编写的其他书目。
示例:
div { word-wrap: break-word; }

word-break版本:IE5+专有属性 继承性:无
语法:
word-break : normal | break-all | keep-all
参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak
示例:
div {word-break : break-all; }

不过firefox虽然对于div, p等块级元素的分行没有办法,但似乎对table里的分行还是可以做到的。
td{
width: 300px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

参考:css属性查询:http://52css.com/css/
 FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX
  评论这张
 
阅读(891)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017