在字符串中放入新行以进行翻译

Posted 2023-02-16

【中文标题】在字符串中放入新行以进行翻译

【英文标题】：put new line in string to translate

【发布时间】：2018-01-30 19:44:36

【问题描述】：

我正在使用 ngx-translate。

如何在要翻译的字符串中添加换行符？

在我的模板中：

'STRING_TO_TRANSLATE' | translate

在我的 en.json 中：

"STRING_TO_TRANSLATE": "text on first line. <br> or \n don't work. Text on second line"

【问题讨论】：

我的解决方案有帮助吗？在这种情况下考虑将其标记为已接受，谢谢！

【参考方案1】：

有效！但不是

'STRING_TO_TRANSLATE' | translate

你应该这样做

<div [innerhtml]="'STRING_TO_TRANSLATE' | translate"></div>

<br/>s 应该可以正常工作，但在其他情况下，您可能需要一些额外的“安全 html 管道”，即：

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer  from '@angular/platform-browser';

@Pipe(name: 'mySafeHtmlPipe')
export class SafeHtmlPipe implements PipeTransform 
  constructor(private sanitizer: DomSanitizer) 
  

  public transform(htmlContent) 
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  

【参考方案2】：

如果你想要<p></p> 对应\n\n 和<br /> 对应\n，这是我的解决方案：

第一步：照我说的做in this comment

第 2 步：像这样链接你的管道：

<div [innerHTML]="'YOUR_TRANSLATE_WITH_\n_OR_\n\n_GOES_HERE' | translate | nl2pbr"></div>

有关链接管道的更多信息：https://angular.io/guide/pipes#chaining-pipes

【参考方案3】：

您可以使用 \n，但您必须提供一些样式。

所以在你的模板中使用这个：

<div class="my-translated-paragraph">
    'STRING_TO_TRANSLATE' | translate
</div>

你的 en.json：

"STRING_TO_TRANSLATE": "text on first line.\nText on second line"

您的 (s)CSS 文件：

.my-translated-paragraph
    white-space: pre-wrap;

更多信息以及空白背后的魔力：https://***.com/a/42354356/3757110

另请参阅关于此的 github 问题：https://github.com/angular-translate/angular-translate/issues/595

【参考方案4】：

这种情况可以通过某种方式解决，但恕我直言，真正的解决方案是：

.container 
    white-space: pre-line;

pre-wrap 和 pre-line 之间存在显着差异。预包装将导致浏览器保留所有空格，因此您将获得第一行缩进。前置行会将我们的空格序列折叠成一个空格，并且不会出现缩进。

您可以在 MDN 文档中阅读更多内容，实际链接如下：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space