[CSS] 元素内的空白 white-space 属性

<html>
  <head>
    <style type="text/css">
      p, div {
        width: 600px;
        border: 1px solid green;
      }
      .p1 {
        white-space: nowrap;
      }

      .p2 {
        white-space: pre;
      }

      .p3 {
        white-space: pre-line;
      }

      .p4 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <p class="p1">
      white-space: nowrap;
      这是一些文本。这是一些文本。               前面空白。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
    </p>

    <p class="p2">white-space: pre;
这是一些文本。这是一些文本。               前面空白。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
    </p>

    <p class="p3">white-space: pre-line;
      这是一些文本。这是一些文本。               前面空白。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
    </p>

    <p class="p4">white-space: pre-wrap;
这是一些文本。这是一些文本。               前面空白。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
    </p>

    <div class="p3">
      white-space: pre-line;
      这是一些文本。这是一些文本。               前面空白。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
    </div>
  </body>
</html>
注意：在使用 pre-xxx 相关值的时候，html内容不能令起一行，否则会产生顶部空白间隙（见div.p3），类似<span>。
david2tdw / blog

[CSS] 元素内的空白 white-space 属性 #176
