CSS解读之换行属性

       首先换行只适用于标签内的文本，并不作用于标签本身。以前在使用CSS换行的时候，老是犯糊涂，总把一些属性搞混。今天就来彻底把这些相关的属性给弄清楚。以前需要用到自动换行的时候，就想到了比如word-break，word-wrap及white-space这些属性。

       用一个表格将上述的几个属性及其属性值做一下说明。

属性

属性值

说明

示例

容器样式div{ width: 199px; }

这里故意把其中搞一个单词success写长来做一个极端测试。

word-break

normal

浏览器默认处理

容器实际宽度已经大于199px

break-all

单词内换行，这个在英文中常用，汉字用不上

break-word

只能在半角空格或连字符处换行。这个规则其实还是更多用于英文

上面这种是属于在空格处换行

上面这种属于在连接符处换行

word-wrap

normal

控制连续文本换行。

容器实际宽度已经大于199px

break-word

内容将在边界内换行。如果需要，词内换行（word-break）也会发生。