首页 > 其他 > 详细

div块级元素内文字换行word-wrap, word-break,white-space。

时间:2015-08-29 13:53:37      阅读:670      评论:0      收藏:0      [点我收藏+]

word-wrap: normal; || word-break: normal;

当word-wrap或者word-break为normal时,也就是浏览器的默认设置时。

换行规则是这样的:

    情景一:  当一个单词在行尾不能完整容纳时,会自动将这个单词换到下一行,示例如下。

          技术分享

    情景二:  当一个长长的单词在行尾不能完整容纳,并且换行后还是不能容纳时,单词就会溢出容器,示例如下。

          技术分享


word-wrap: break-word;

当word-wrap设置为break-word时,

换行规则如下:

     情景一: 和normal情况相同。

        技术分享

     情景二: 这时,单词不会溢出容器,而是单词断开,换到下一行。

        技术分享     


 

word-break: break-all;

当word-break设置为break-all时,

换行规则如下:

     情景一: 这时,发生了变化。单词不会整体换行,而是断开单词,换到下一行。

        技术分享

    情景二: 这时,和之前相比,又发生了变化。单词还是不会整体换行,单词会不断的断开,换到下一行。

        技术分享


总结:

normal和break的区别在于:  单词是否会断开。normal不会断开单词,只会把单词整体换行或者溢出容器。而break会选择断开单词换行。

word-wrap和word-break的区别在于:  单词是否会整体换行。前者会整体换行再断开单词,而后者直接断开单词。


 

div块级元素内文字换行word-wrap, word-break,white-space。

原文:http://www.cnblogs.com/byronvis/p/4769006.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!