css3笔记——控制文本换行

当文本超出边界之后可能会需要文本换行显示,因此就会需要css的文本换行属性。

不可否认IE浏览器在文字处理方面走在了其他的浏览器前面,IE定义了较为详细的文字多行显示属性。

  • line-break 控制日文的换行
  • word-wrap 属性为break-word时,文本换行。
  • word-break 属性为break-all时容许非东亚单词在字内断开;属性为keep-all时不容许东亚字符(如中文、韩文、日文)在字内断开。
  • white-space 属性为nowrap时,强制文字在一行显示,不容许换行;属性为pre时,显示预定义的文本格式。

css3中纳入上述的几个属性(link)下面以demo为例探究下在容器宽度较小的情况下不同属性在不同浏览器的表现。

1.在不使用上述属性的情况下(或者word-wrap;word-break均取normal时),各个浏览器的表现一样,如下图所示,浏览器对中文的渲染呈现很好,会自动换行,但是长单词(blog.hicc.me类似于长单词)会溢出盒子,不换行。

word-wrapword-wrap

2.设置word-wrap:break-word;各个浏览器表现一致,可以看到长单词已经断开。

word-wrapword-wrap

3.设置word-wrap:break-word;word-break:keep-all;时浏览器表现一致。

word-wrapword-wrap

4.设置word-wrap:break-word;word-break:break-all;的时候可以看到浏览器对于非东亚字体的处理比较激进,对于到达边界的字体,即使在字内也进行强制断开。但是值得注意的是FF的表现比较“正常”。

word-wrapword-wrap

因此总结来说:

  1. 浏览器对中文的处理很为友好,在到达容器边界的情况下都会自动换行,因此在中文情况或者没有url之类的长英文单词的情况下,可以让浏览器自行处理,无需设置多余的css。
  2. 而对于会出现长单词的情况下,使用word-wrap:break-word;即可控制换行,不推荐使用word-break:break-all;这会严重的破坏阅读。

最后可以对于浮动元素设置了word-wrap属性所引起的IE6 7 所引起的bug可以查看淘宝ued的word wrap解惑的博文,上述的观点基本来自ued的博文。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus