Angular项目TypeScript段落换行符\n传入HTML渲染不生效问题

HTML默认渲染规则会将文本中的普通换行符\n识别为普通空白字符，和空格、制表符等做合并处理，不会自动触发换行或段落拆分，和Angular的属性传值逻辑无关，因此会出现换行失效、文本连成一段的现象。

根据实际需要的渲染效果，选择对应方案即可：

• 方案1：CSS快速实现单段内换行（改动最小）
  不需要修改TS侧的文本定义，只需要给渲染copy内容的元素添加CSS属性white-space: pre-line即可：

  .content-wrap {
    /* 保留文本中的\n换行，自动合并多余连续空格，超出容器宽度自动折行 */
    white-space: pre-line;
  }
  

  注意：如果是展示代码、需要保留所有空格缩进的场景，可以替换为white-space: pre-wrap，不要直接用white-space: pre，该值不会自动折行，长文本会溢出容器。
  这个方案实现的是单段文本内的软换行，行高、间距和普通文本行一致。

• 方案2：拆分渲染独立段落（完全匹配预期的多段落效果）
  如果你需要\n前后的内容拆分为独立的<p>标签、方便单独控制段落间距等样式，可以先在TS侧把文本按\n拆分为段落数组：

  // 原文本
  rawContent = `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. \n It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;
  // 拆分段落，去除首尾空格、过滤空内容避免生成空标签
  contentParagraphs = this.rawContent.split('\n').map(item => item.trim()).filter(Boolean);
  

  之后在模板里循环渲染段落即可：

  <p *ngFor="let para of contentParagraphs">{{ para }}</p>
  

  渲染后会生成两个独立的<p>标签，和预期DOM结构完全一致。

• 不推荐方案：替换\n为<br>标签通过innerHTML渲染
  这种方式需要手动处理XSS安全校验，非完全可信的文本内容存在注入风险，除非特殊场景否则不建议使用。

内容的提问来源于stack exchange，提问作者Shiva Vatigunta