css：white-space及文本回车换行符

文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

语法

white-space: normal;

可选值

值说明normal连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。nowrap和 normal 一样，连续的空白符会被合并。但文本内的换行无效。pre连续的空白符会被保留。在遇到换行符或者元素时才会换行。pre-wrap连续的空白符会被保留。在遇到换行符或者元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者元素，或者需要为了填充「行框盒子(line boxes)」时会换行。break-spaces与 pre-wrap的行为相同，除了：1、任何保留的空白序列总是占用空间，包括在行尾。2、每个保留的空格字符后都存在换行机会，包括空格字符之间。3、这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。 示例：

说明：以下句子在每个句号。后面都有一个回车符

“第一原则思维”在当今备受推崇。 
作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。 
创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。 
同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  .box {
    width: 500px;
    margin: 0 auto;
    border: 1px solid #666666;
  }

  .box-title {
    text-align: center;
    margin-top: 20px;
    color: red;
  }

  .white-space--normal {
    white-space: normal;
  }

  .white-space--nowrap {
    white-space: nowrap;
  }

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

  .white-space--pre-wrap {
    white-space: pre-wrap;
  }

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

  .white-space--break-spaces {
    white-space: break-spaces;
  }



  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: normal
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: nowrap
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: pre
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: pre-wrap
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: pre-line
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

  white-space: break-spaces
  “第一原则思维”在当今备受推崇。
    作者在自己的创业过程中总结了“第一原则思维”应用的一些经验。
    创业精神最简单的形式就是，运用你的“特定知识”( specific knowledge)，在别人的生活中创造价值。
    同时，利用诸如劳动力（labor）、资本（capital）、技术（technology）和社会资本（ social capital）等杠杆充分撬动自己的“特定知识”，我们就能将特定知识规模化，更好地实现创业目的。

各参数实现效果(点击图片放大查看)

方案一：

css控制回车换行

white-space: pre-wrap;

方案一：

js正则匹配所有回车，替换为换行符

content = content.replace(/\n/g, '');