angular 中的只读组件不显示换行符

Question

我正在使用 C# 应用程序开发 Angular。我有一些只读组件用于显示数据库中保存的数据。例如，我将以下文本放入 Textarea 组件中：

hello 

there




hello

所以这是有空格的。然后它将正确保存在数据库中。因为当我选择编辑时，文本将正确显示。但在我保存文本后，我选择了文本的详细信息。那么 alinea 的显示不正确。因为 alinea 已被删除。

我尝试使用 <pre></pre>，但文本格式正确但会破坏布局。

所以如果我这样做：

  <pre>
    <afw-readonly [resources]="resources" fieldResourceKeyPrefix="beschrijving"
      [fieldValue]="learningPathDetails.description" [enableHtml]="false" 
      [readMoreCharLimit]="300"
      ></afw-readonly>
  </pre>

然后格式将正确显示。但是布局坏了。

那么如何纠正呢？谢谢

Answer 1

<pre> 对于维护换行符非常有用，但它会破坏布局。问题是您可以使用 CSS.

做同样的事情

var someText = `This is some text with some new lines.
Line 1
Line 2

Line 3. Kewl.`;

$("pre").text(someText);

$(".simulate-pre").text(someText);

$(".no-pre").text(someText);

.margins * {
  margin: 5px 0;
}

.real-pre {
  border: 1px solid red;
}

.simulate-pre {
  border: 1px solid purple;
  white-space: pre-line;
}

.no-pre {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="margins">
  <pre class="real-pre"></pre>
  <div class="simulate-pre"></div>
  <div class="no-pre"></div>
</div>

angular 中的只读组件不显示换行符

Readonly component in angular doesn't show line breaks

javascript

c#

angular

readonly