• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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-spaceCSS 属性是用来设置如何处理元素中的空白。

    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