扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
首先上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。一开始没什么问题，但是有几个页面字符串又超出去了。只好重新捋一遍查看问题所在：
自己写了个demo调试，发现只要有数字文本存在的时候，就会有这种情况，并且一开始没有问题的英文数字混合文本也会一起跟着超出父元素区域。思考了一下，会不会是因为这个数字文本被当成类似长串英文所以没有换行呢？
尝试增加属性：wordwrap:break-word，查看效果。
得到的教训是：以后不能想当然地简单粗暴地改，还是要踏踏实实改到最满意为止，代码优雅简洁性和体验都要尽量满足。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网