容器定宽150px的前提下，普通文字如左图浏览器足以胜任自动换行，右图遇见长单词或URL，浏览器就力不从心了。当然，你能为容器设置overflow:auto;，让滚动条出现，以避免撑破容器。或干脆overflow:hidden;让超出部分隐藏，见下图
但总感觉overflow不太理想，应该有换行专用的属性。本篇就介绍一下3种换行的属性
word-wrap word-break white-spaceword-wrap
word-wrap能实现断词换行。可设normal，break-word。默认值normal等于没设，不赘述。break-word允许断词换行。如右图设了word-wrap: break-word;后，浏览器的执行过程：发现长单词显示不下，根据默认的换行规则，用半角空格换行，因此Ooops too后面空出了一段空白，长单词移到第二行发现仍旧显示不下，于是断词换行，长单词和URL因此被中间截断。
word-break
word-break可以设置浏览器自动换行的方式。可设normal，break-all，keep-all。默认值normal等于没设，不赘述。break-all将浏览器的换行模式设为根据容器尺寸允许断词换行。和上面word-wrap: break-word;有什么区别呢？看下图，蓝线部分。
左图word-wrap的break-word是沿用浏览器默认的换行方式，因此“Ooops too”后面空出了一段空白，上面有解释，不赘述。右图word-break的break-all是改变浏览器默认的换行方式，让浏览器无视半角空格，直接根据容器尺寸换行，因此遇到长单词时，直接断词换行。效果上看word-break: break-all;比word-wrap: break-word;更节省页面空间。
keep-all不允许断词，在英语系情况下等同于normal，等同于没有设。在中日韩文情况下，normal和keep-all有区别，见下图
中日韩文情况下，normal仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成keep-all后，将不再允许断词（哪怕是中日韩文），只能像英语系一样根据半角空格或标点来换行。white-space
white-space设置空白符和换行符。可设默认值normal，可设pre， nowrap，pre-line，pre-wrap。效果见下图
//xxx替换相应的值Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。查看更多关于CSS3文本换行_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112571