网页中的文本排版

CSS

white-space：空格的处理方式

语法

white-space：normal | pre | nowrap | pre-wrap | pre-line
默认值：normal
适用于：所有元素
继承性：有
动画性：否
计算值：指定值

取值

normal：默认处理方式。忽略行首空白，忽略连续多余空白，其余照常 换行 排版。

pre：即全部严格保留原格式。

nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。

pre-wrap：不忽略行首空白，也不忽略文字间的多余空白，

pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。与normal一样

word-break(wrap)：过长单词换行

一连串英文字母连在一起，视为一个单词。单词过长，超过边界，默认不换行，会超出边界。

使用word-break方法折行：

.demo{
word-break：break-all
}

使用word-wrap折行

.demo{
word-wrap : break-word // 内容将在边界内换行。如果需要，过长单词内部允许折行。
}

一般中文不会出现一个单词过长导致超出边界的问题，一般是特殊要求，或者文本胡乱输入长串英文字符才会出现超出边界的问题。

CSS3中已经将 word-wrap 改名为 overflow-wrap

text-overflow：文本溢出处理

当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否 截断 或者添加 (...) 及 自定义字符

要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。