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>

Angle中的只读组件未显示换行符

1 个答案: