white-space

white-space CSS 属性是用来设置如何处理元素中的空白。

示例

/* keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* global values */
white-space: inherit;
white-space: initial;
white-space: unset;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 white-space

语法:

white-space : normal | pre | nowrap | pre-wrap | pre-line | break-spaces

设置或检索对象内空格的处理方式。

  • 对应的脚本特性为 whiteSpace

white-space CSS 属性是用来设置如何处理元素中的空白。

white-space 属性被指定为从下面的值列表中选择的单个关键字。

取值:

  • normal:默认处理方式。连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。
  • pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象。连续的空白符会被保留。在遇到换行符或者 <br> 元素时才会换行。
  • nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。连续的空白符会被合并。但文本内的换行无效。
  • pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。 pre-wrap 连续的空白符会被保留。在遇到换行符或者 <br> 元素,或者需要为了填充line盒子时才会换行。
  • pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。 pre-line 连续的空白符会被合并。在遇到换行符或者
    元素在文本中生成一个换行(回车)符号
  • break-spaces:与 pre-wrap的行为相同,除了:
    1. 任何保留的空白序列总是占用空间,包括在行尾。
    2. 每个保留的空格字符后都存在换行机会,包括空格字符之间。
    3. 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)

下面的表格总结了各种 white-space 值的行为:

换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

实例

下面的代码允许在 <pre> 中换行

pre {
  word-wrap: break-word;      /* ie 5.5-7 */
  white-space: pre-wrap;      /* current browsers */
}

上篇: text-transform

下篇: tab-size