CSS 将 DOM 树转换为由矩形 Box 构成的树,并通过设置这些 Box 的属性来改变其位置和大小,描述每个元素或文本的布局。这些 Box 分为三个级别:
-
block-level
Box:display
属性为block
的Box,比如段落标签<p>
; -
inline-level
Box:display
属性为inline-block
的Box,它们就像一行中的单词一样布局。它里面可以包含其他inline-level
的Box,也可以包含block-level
的Box; -
line
Box:一行单词就构成一个line
Box,这种Box是自动生成的,可以看做是inline-level
Box的容器。
溢出、折行、断词是line
Box中常见的问题,设置这些行为的CSS属性包括white-space
、line-spacing
、text-overflow
、word-wrap
、word-break
等。 下面几小节中详细介绍这些属性的取值与对应的行为、以及常见的使用方法。
更多信息请参考:W3C 标准:CSS3-Box
line Box
下面的小节中介绍的CSS属性只适用于line
Box,那么什么是line
Box呢?请看下面的HTML片段:
<ul>
<li>The first item in the list.
<li>The second item.
</ul>
ul
会生成一个block-level
的 Box,然后为每个li
元素生成一个block-level
的 Box。 而每个li
的 Box 中有一个line
Box,它包含了两个inline-level
的 Box: 一个用来显示“ · ”,一个用来显示文本。
如果
li
产生了换行,将会变成多个inline-level
Box,如果在ul
中间产生了分页,那么ul
会显示为两个block-level
Box。
white-space
white-space属性描述了如何处理空白(空格、制表、换行)字符。它有5种取值:
white-space: normal | pre | nowrap | pre-wrap | pre-line;
-
normal
:连续的空白符会被合并,换行符会被当作空白,宽度不够时会折行。 -
nowrap
:同normal
,但不会折行。 -
pre
:连续的空白符会被保留,换行符、<br>
也会引起换行,但不会折行。 -
pre-wrap
:同pre
,但是会折行。 -
pre-line
:同pre-wrap
,但是连续的空白符会被合并。
合并的空白宽度由
word-spacing
属性设置。
word-wrap
只有出现空白字符时,才可以设置white-space
来折行。如果需要切分单词,你需要设置word-wrap属性。 word-wrap
指定了当一个不能被分开的单词太长引起溢出时,是否允许中断换行。有两种取值:
word-wrap: normal | break-word;
默认为normal
,设置为break-word
后,当单词太长要溢出时中断换行,如下图:
word-break
word-break指定了怎样在单词内换行。有三种取值:
word-break: normal | break-all | break-word | keep-all
-
normal
:使用浏览器默认行为,不做任何断词,但会优先考虑在空白字符处折行。如下图。 -
break-word
:与设置word-wrap:break-word
的效果相同。 -
break-all
:可在任意字符间断行。此时不会优先考虑在空白字符处折行,而是平铺所有字符,需要折行时断词,如图。 -
keep-all
:同normal
,但 CJK 文本不断行。
text-overflow
text-overflow指定了溢出的内容如何显示,只在inline
方向溢出时起作用,有3种取值:
text-overflow: clip|ellipsis|string;
clip
为隐藏溢出的部分,ellipsis
为显示省略号,string
为使用给定的字符串来代替被剪掉的文本。 其中ellipsis
最为常用,通常设置text-overflow
的同时需要设置white-space: nowrap; overflow: hidden
: