网页设计CSS里{word-wrap:break-word;word-break:break-all;}是什么意思

html-css025

网页设计CSS里{word-wrap:break-word;word-break:break-all;}是什么意思,第1张

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

word-breakbreak-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。

还有,我在做KingCMS模板的时候,碰到easyarticle[list](此为5.0版本所含文件)页面。这个页面是个文章列表,其中有个 (king:description size="200"/)的标签,也就是说其描述是200个字符,因为默认的模板比内容div容器比较大,所以能正常显示,但当size设置为400的时候,超过内容div容器的时候,右栏的内容就会被顶到下面去,所以这时候在class中设置下word-wrap: break-word就可以解决这个问题了。

解释:

1、反反复复反反复复发反反复复反反复复反反复复发反反复复反反复复反反反反复复发反反复复

这个浏览器认为是一段话,就是 反 反 复 复 是一个一个得字符。然后就会自动换行。

2、sssssssssssssssssssssssssss

这个浏览器认为是一个单词(貌似单词很长的说),但是确实就是一个very long的单词 单词是不会存在换行的。再举个例子ssssssssssssssss aaaaaaaaaaaaaaaaa 中间有个空格,那么他们就是两个单词了,要是连在一起 就是一个单词了。

解决办法:

首先说一下,ssssssssssssssssssssssss现实生活基本碰不上,除非有人恶搞...

在CSS中补上{overflow:hidden}

******************************************

楼上说的word-break是IE私有属性。ff不支持。

另外即使用也要用word-wrap:break-word;因为word-break:break-all就是所有英文都要换行,会把单词截断的,影响阅读。

word-break:break-all //把英文单词不管三七二十一给弄断了,影响阅读。

word-wrap:break-word //不仅可以把超级长的英文单词截断,还可以根据空格区分英文单词,保持它的可读性。

最后FF不支持上面两个。

再说,还是那句话sssssssssssssssssssssssssssssss现实生活基本碰不上,除非有人恶搞...

ord-break:break-all //把英文单词不管三七二十一给弄断了,影响阅读。

word-wrap:break-word //不仅可以把超级长的英文单词截断,还可以根据空格区分英文单词,保持它的可读性。

最后FF不支持上面两个。