word-wrap和word-break属性使用小记

word-wrap
word-wrap属性在CSS2中并不存在,是CSS3草案中才创建的新属性。其作用是依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,且允许非亚洲语言文本行的任意字内断开。

CSS3草案中的解释为:
This property specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box. It only has an effect when ‘text-wrap’ is either ‘normal’ or ‘suppress’.

word-wrap可设置两个属性:normal、break-word,默认值为normal,以下是对两个属性值的解释:
normal
Lines may break only at allowed break points.

break-word
An unbreakable “word” may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit.

word-break
内容将在边界内换行。如果需要,词内换行( word-break )也将发生。

CSS3草案中的解释为:http://www.w3.org/TR/css3-text/#word-break

可设置的值如下:
normal
Breaks non-CJK scripts according to their own rules while using a strict set of line breaking restrictions for CJK scripts (Hangul, Japanese Kana, and CJK ideographs).
keep-all
Same as ‘normal’ for all non-CJK scripts. However, sequences of CJK characters can no longer break on implied break points. This option should only be used where the presence of white space characters still creates line-breaking opportunities, as in Korean.
loose
As for ‘normal’, but CJK scripts use a less restrictive set of line-breaking restrictions.
break-strict
Same as ‘normal’ for CJK scripts, but non-CJK scripts can break anywhere. This option is used mostly when the text is predominantly CJK characters with few non-CJK excerpts and it is desired that the text be more evenly distributed on each line.
break-all
As for ‘break-strict’, except CJK scripts break according to the rules for ‘loose’.

word-break:break-all和word-wrap:break-word的区别:
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整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

另外firefox、opera不支持word-break和word-wrap属性。

参考链接:
http://ued.koubei.com/?p=493#more-493
http://space.ie139.com/html/77/n-2977.html
http://www.w3.org/TR/css3-text/

此条目发表在sitebuild分类目录,贴了, 标签。将固定链接加入收藏夹。

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据