angular 中的只读组件不显示换行符
Readonly component in angular doesn't show line breaks
我正在使用 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>
然后格式将正确显示。但是布局坏了。
那么如何纠正呢?谢谢
<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>
我正在使用 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>
然后格式将正确显示。但是布局坏了。
那么如何纠正呢?谢谢
<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>