如何在 blazor 中设置文本格式

Question

大家好，我正在 blazor 中创建一个新项目，我正在尝试在 html 中使用 in 之前格式化文本，我尝试执行此操作的方式是使用替换，我的主要问题是我可以添加断线

这是我正在使用的功能

public string gLInjectionStatusFormattedText (string? rawText) {
        var text = rawText?.Replace("- Valve:", "\n Valve:")
            .Replace("{CompletionAnalysisResults.troubleshooting_data.cont_gaslift_cmpl_inject_status.ref_data.current_op_valve_description}", "Weatherford RO-1 5/32 (THC)")
            .Replace("- Mandrel number:", "\n Mandrel number:")
            .Replace("{CompletionAnalysisResults.troubleshooting_data.cont_gaslift_cmpl_inject_status.ref_data.current_op_valve_mand_num}", "8")
            .Replace("- Meas Depth:", "\n Meas Depth:")
            .Replace("{CompletionAnalysisResults.troubleshooting_data.cont_gaslift_cmpl_inject_status.ref_data.current_op_valve_depth}", "4833.0 feet")
            .Replace("{CompletionAnalysisResults.troubleshooting_data.cont_gaslift_cmpl_inject_status.ref_data.valve_status_summary}", "The deepest possible injection depth for this well is 4833.0 feet (MD) at current operating conditions.")
            .Replace("Valve Status Summary:", "Valve Status Summary:");

        return text ?? "";
    }

我在 html (blazor) 中使用它，就像这样

<div Class="d-flex flex-column gap-4">
     <div Class="d-flex  gap-4">
        @getSummaryStatusColor(summaryStatus.GLInjectionStatus)
        <div>GL Injection Status:</div>
     </div>
     <p>@gLInjectionStatusFormattedText(summaryStatus.GLInjectionText)</p>                           
</div>

其中summaryStatus.GLInjectionText是我从数据库获取的字符串

我希望我的文字看起来像这样

This well is injecting at its designed operating point:

Valve: Weatherford RO-1 5/32 (THC)
Mandrel number: 6
Meas Depth: 4833.0 feet  
Valve Status Summary: The deepest possible injection depth for this well is 4833.0 feet (MD) at current operating conditions.
 
Lift gas injection is from an ORIF valve in mandrel number 6 at 4833.0 feet and has an estimated flow rate of 453.292 MCF/day.

但是在我的 html 中却出现这样的情况：

This well is injecting at its designed operating point: Valve: Weatherford RO-1 5/32 (THC) Mandrel number: 8 Meas Depth: 4833.0 feet   Valve Status Summary: The deepest possible injection depth for this well is 4833.0 feet (MD) at current operating conditions.

有什么办法可以实现这个目标吗？

Answer 1

默认情况下，HTML 忽略换行符 ' ' 和粗细空格，如果您想将文本渲染为新行，请使用

<br>

或者您可以将文本放在

<pre></pre>

之间，这会告诉 HTML 引擎按原样渲染文本。

<div Class="d-flex flex-column gap-4">
     <div Class="d-flex  gap-4">
        @getSummaryStatusColor(summaryStatus.GLInjectionStatus)
        <div>GL Injection Status:</div>
     </div>
     <p><pre>@gLInjectionStatusFormattedText(summaryStatus.GLInjectionText)</pre></p>                           
</div>