word-wrap,word-break,text-wrap的区别
今晚看到了无双老师关于word-wrap,word-break区别的讲解 http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
受益匪浅，特此在做一下自己的总结
word-wrap
对长单词进行折断,对长单词首先换行看第二行是否可以容纳，若不能，在第二行强制折断 默认值为normal 折断值为break-world
word-break
对长单词进行折断，直接强制折断，不换行 默认值为normal 折断值为break-all
text-wrap
对文本折行，但是目前主流的浏览器都不支持该属性，所以无需考虑
以下段代码为例
<!DOCTYPE html> <html> <head> <style> p.test { width:11em; border:1px solid #000000; /*
word-wrap:break-word; word-break:break-all; */
} </style> </head> <body> <p class="test">this asdsadasdasadsadlongwordthisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body> </html>
不设置换行时
当为word-wrap：break-word时
当为word-break:break-all
可以看到，用户代理默认的会对长单词进行换行,而word-wrap默认了这一行为，但是word-break会强制忽略这一行为。
