CSS之 white-space : pre

在 github 的代码浏览页面，可以看到这样的 css 样式：

<td class="blob-code-inner">        
  <span class="pl-k">throw</span> 
  <span class="pl-k">new</span> 
  <span class="pl-en">Error</span>(
  <span class="pl-s">
     <span class="pl-pds">"</span>
     Chartbeat: Please specify an api key and host!
     <span class="pl-pds">"</span>
  </span>);
</td>

<style>
.blob-code-inner {
    overflow: visible;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 12px;
    color: #333;
    word-wrap: normal;
    white-space: pre;
</style>

显示效果：

// 注意：前面是有多个空格缩进的。
    throw new Error("Chartbeat: Please specify an api key and host!");

重点：

多个空格缩进的效果是由： white-space: pre; 控制的。

——————————————————————————————————————————————————————————————

语法：


Definition and Usage
The white-space property specifies how white-space inside an element is handled.


Property Values

__Value__	__Description__
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a BR tag is encountered
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the PRE tag in HTML
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

REF： http://www.w3schools.com/cssref/pr_text_white-space.asp







-