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-break;break-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;就可以解决这个问题了。 |
div this english h1 and 亚洲 | 分类:程序开发 |
word-wrap同break-word的区别
word-wrap:
normal Default. Content exceeds the boundaries of its container.
break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
break-word:
normal Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
另,测试代码如下:
1.htm===================================================================
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
效果:容器正常,内容隐藏
对于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;无法起作用
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
下面是提到的例子的效果
div
All white-space:normal;
IE word-wrap : break-word ;
IE word-break:break-all;
Firefox/ word-break:break-all; overflow:auto;
table
table-layout:fixed;
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
table-layout:fixed; word-break : break-all; word-wrap : break-word ;
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss | abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
FF table-layout:fixed; overflow:hidden;