white-space

语法

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

取值

  • normal:默认处理方式。
  • pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
  • nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
  • pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
  • pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

说明

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

  • 对应的脚本特性为whiteSpace。

兼容性

Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0+ 2.0+ 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
pre-wrap 6.0-7.0 2.0 -moz- 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
8.0+ 3.0+
pre-line 6.0-7.0 2.0-3.0
8.0+ 3.5+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test p{width:200px;border:1px solid #000;}
.normal p{word-wrap:normal;}
.pre p{white-space:pre;}
.pre-wrap p{white-space:pre-wrap;}
.pre-line p{white-space:pre-line;}
.nowrap p{white-space:nowrap;}
</style>
</head>
<body>
<ul class="test">
    <li class="normal">
        <strong>normal:</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li>
    <li class="pre">
        <strong>pre:</strong>
        <p>轻轻地我走了(这里接很多测试文字)
    正如我轻轻地来</p>
    </li>
    <li class="pre-wrap">
        <strong>pre-wrap:</strong>
        <p>轻轻地    我走了(这里接很多测试文字)
    正如我轻轻地来</p>
    </li>
    <li class="pre-line">
        <strong>pre-line</strong>
        <p>轻轻地    我走了(这里接很多测试文字)
    正如我轻轻地来</p>
    </li>
    <li class="nowrap">
        <strong>nowrap:</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li>
</ul>
</body>
</html>