word-break和word-wrap

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

成都创新互联公司是一家专业从事成都网站设计、成都网站制作的网络公司。作为专业网站设计公司,成都创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、全网营销推广及网站设计开发服务！

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，查看效果。

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

分享标题：word-break和word-wrap
分享URL：http://cdiso.cn/article/pidoij.html