word-wrap、word-break、white-space

http://jsfiddle.net/joya0411/S8N2j/3/embedded/result/

 

word-wrap:normal(默认)/break-word;

希望超长英文/网址，在下一行显示，显示不下折行，使用：word-wrap:break-word;

 

word-break:normal(默认)/break-all/keep-all(chrome不支持)

希望超长英文/网址，立即折行显示(全部显示在容器内)，使用: word-break:break-all;     ＝>不利用阅读

超长文本/英文/网址,遇到'-/空格'才折行显示，否则在一行显示，keep-all

 

white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

 

normal:正常

nowrap:一行显示，遇到<br/>换行

pre-line:合并空白，保留换行

pre:等宽字体，保留空白和换行，超出边界时不换行,类似HTML的标签<pre>

pre-wrap:等宽字体，保留空白和换行，超出边界时换行

inherit:继承父级

 

http://www.w3cplus.com/content/css3-word-wrap

 

pre和pre-wrap的区别是

1、pre：超出边界不换行

2、pre-wrap：超出边界换行