网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

word-break和word-wrap-创新互联

首先上word-break和word-wrap的区别:

成都创新互联是专业的内乡网站建设公司,内乡接单;提供网站设计制作、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行内乡网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。特别是一行中最后一个单词如果太长,它即使超过了div的宽度,也不会换行的。

word-break是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)

最近项目中有个页面,字符串太长导致在小屏幕显示超出范围,一开始修正为:width:50%,但是在大屏幕上很早就开始折行,很难看,然后去掉改成了word-wrap:break-word。一开始没什么问题,但是有几个页面字符串又超出去了。只好重新捋一遍查看问题所在:

word-break和word-wrap

自己写了个demo调试,发现只要有数字文本存在的时候,就会有这种情况,并且一开始没有问题的英文数字混合文本也会一起跟着超出父元素区域。思考了一下,会不会是因为这个数字文本被当成类似长串英文所以没有换行呢?

尝试增加属性:wordwrap:break-word,查看效果。

word-break和word-wrap

得到的教训是:以后不能想当然地简单粗暴地改,还是要踏踏实实改到最满意为止,代码优雅简洁性和体验都要尽量满足。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前名称:word-break和word-wrap-创新互联
文章网址:http://bjjierui.cn/article/cdhdpg.html

其他资讯