码迷,mamicode.com
首页 > 其他好文 > 详细

word-wrap:break-word和word-break:break-all的区别

时间:2016-11-19 20:14:19      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:bre   大于   宽度   容器   区别   word   break   wrap   位置   

  当我们要显示的句子“how are youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”超过了容器的宽度(且容器宽度大于"how are"显示的宽度)时,

  若我们使用了word-wrap:break-word,则“how are”的位置不变,而“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会跳到下一行,要是“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”还超出容器的宽度,则此单词会被拆开到下一行显示;

  若我们使用了word-break:break-all;则会根据容器的宽度显示此句子,直接从长单词“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”的某部位拆开此单词,后面部分显示到下一行。即,长单词“youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu”会根据容器宽度去让单词断开,断开的前部分会跟“how are”显示在同一行,断开的后部分显示到下一行。

  同样的是word-wrap:break-word和word-break:break-all都可以让超过容器宽度的单词被拆分开来。

word-wrap:break-word和word-break:break-all的区别

标签:bre   大于   宽度   容器   区别   word   break   wrap   位置   

原文地址:http://www.cnblogs.com/andy-and-bella/p/6081162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!