Blazor中实现文本换行格式化的方法求助

问题根源 #

HTML渲染文本时，会将字符串中的\n换行符视为普通空白字符，不会自动解析成换行效果，所以你通过Replace添加的\n无法在页面上呈现换行。

解决方案1：将\n替换为HTML换行标签<br> #

修改C#格式化函数，把所有\n替换成<br>，同时使用Blazor的MarkupString类型渲染HTML内容（直接输出字符串会把<br>当成纯文本显示）。

修改后的C#函数 #

public MarkupString gLInjectionStatusFormattedText(string? rawText)
{
    var text = rawText?.Replace("- Valve:", "<br>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:", "<br>Mandrel number:")
        .Replace("{CompletionAnalysisResults.troubleshooting_data.cont_gaslift_cmpl_inject_status.ref_data.current_op_valve_mand_num}", "8")
        .Replace("- Meas Depth:", "<br>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:", "<br>Valve Status Summary:");

    return new MarkupString(text ?? "");
}

修改后的Blazor 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>@gLInjectionStatusFormattedText(summaryStatus.GLInjectionText)</p>                           
</div>

解决方案2：用CSS样式保留换行符 #

如果不想修改字符串处理逻辑，直接给<p>标签添加white-space: pre-line样式，HTML会识别字符串中的\n并转换成换行，同时自动合并多余空白字符。

修改后的Blazor 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 style="white-space: pre-line;">@gLInjectionStatusFormattedText(summaryStatus.GLInjectionText)</p>                           
</div>

（注：推荐把样式写到CSS类中，避免内联样式的冗余）

方案对比 #

• 方案1适合需要精确控制换行位置、或后续可能添加其他HTML标签的场景；
• 方案2更简洁，无需修改字符串处理逻辑，仅通过样式实现需求，适合纯文本换行场景。

内容的提问来源于stack exchange，提问作者Angel Gabriel Chable Concepcio