CSS解读之换行属性

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

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

属性

属性值

说明

示例

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

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

word-break

normal

浏览器默认处理

CSS解读之换行属性_第1张图片

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

break-all

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

CSS解读之换行属性_第2张图片

break-word

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

CSS解读之换行属性_第3张图片

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

CSS解读之换行属性_第4张图片

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

word-wrap

normal

控制连续文本换行。

CSS解读之换行属性_第5张图片

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

break-word

内容将在边界内换行。如果需要,词内换行(word-break)也会发生。

CSS解读之换行属性_第6张图片

 

你可能感兴趣的:(css,word-wrap,word-break,css换行)