注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】CSS样式之word-wrap&word-break   

2014-12-30 19:01:21|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
        在前几天研究box-sizing属性的时候,随意写了一个例子,元素里面的内容是一长串的数字,发现这一长串数字并不会根据元素的宽度而换行。之前在写样式的时候,元素内容都是文字或者有空格分开的英文文章,这样的情况因为懒竟然被发现了,只好研究断句换行的方法。
CSS样式之word-wrapword-break - 艾某人 - 艾某人
         对word-wrap的解释是:允许长单词换行到下一行,在长单词或URL地址内部进行换行。加上word-wrap: break-word;的效果如果,长单词换到下一行,并且根据容器的宽度往下继续换行。
        word-wrap: break-word; 属性能够兼容IE6+浏览器,在兼容性方面表现的特别优秀。但同时在内容显示的部分也有很明显的缺憾,两个句子之间其实只存在一个空格,但是显示出来的效果并不能尽如人意,第二个长句因为 word-wrap: break-word;属性直接换到下一行,在一定程度上说浪费了第一个短句之后的空间,同时呈现的页面效果并不美观。
CSS样式之word-wrapword-break - 艾某人 - 艾某人
         这时候,我们想到了word-break。word-break的解释是:恰当的断字点进行换行。效果如下图,很好的解决了上述的问题。
         网上有比较久远的文章说word-break:break-all;在opera上不支持,但经过测试,这个属性在IE6+浏览器上目前来看还是很好的都兼容了。
CSS样式之word-wrapword-break - 艾某人 - 艾某人
         这样一看,word-break:break-all;好像是很完美的解决方法,其实不然。再看下面的例子,就知道word-break:break-all;存在多大的弊端。
         这个属性值对于英文文章的断句简直是杀手级别的,应该谁也不会喜欢这样的英文断句方式,所以粗暴的word-break:break-all;断句方式虽然对于长句的处理有它的优势,但并不是所有的情况都适用的。
CSS样式之word-wrapword-break - 艾某人 - 艾某人
       word-break提供了另一个属性值keep-all;只能在半角空格或连字符处换行,它能在第一个长英文的连字符处进行断句,相对于粗暴断句来说更适合英文断句,但是keep-all并不能解决长串换行的问题。
CSS样式之word-wrapword-break - 艾某人 - 艾某人
        所以只能说,各取所取。--艾某人

  评论这张
 
阅读(62)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017