ASP.NET Blazor Razor页面数据库文本换行失效问题求助

从数据库获取的文本在ASP.NET Blazor Razor页面中通过以下代码以纯文本形式展示：

<p class="footText">
    @NewLine
</p>

我需要给以破折号开头的列表项添加换行，使用Environment.NewLine后，调试时Text Visualizer显示文本已包含\r\n，但页面上仍显示为无换行的纯文本，试过StackOverflow上的多种方案都没解决。相关文本处理代码如下：

public class OrderedListText
{
    public string NewLine { get; set; }

    public string ReturnOrderedText(string strText)
    {
        string lineText;

        if (strText != null)
        {
            string[] lines = strText.Split(".");

            if (lines != null)
            {
                for (int i = 0; i < lines.Length; i++)
                {
                    lineText = lines[i];
                    if (lineText.StartsWith(" -"))
                    {
                        NewLine += lineText + Environment.NewLine;
                    }
                }
            }
        }
        return NewLine;
    }
}

问题原因 #

浏览器渲染HTML时，会自动忽略纯文本中的换行符（\r\n、\n），把多个空白字符（包括换行）合并成一个空格。所以即便字符串里有Environment.NewLine，在<p>标签里也不会被解析成换行。

解决办法 #

1. 用<br>标签替代换行符 #

拼接文本时把Environment.NewLine换成<br>，再用Blazor的MarkupString类型渲染，让浏览器识别HTML标签：
修改C#代码：

public class OrderedListText
{
    public MarkupString NewLine { get; set; }

    public MarkupString ReturnOrderedText(string strText)
    {
        StringBuilder sb = new StringBuilder();
        if (strText != null)
        {
            string[] lines = strText.Split(".");
            foreach (var line in lines)
            {
                if (line.StartsWith(" -"))
                {
                    sb.Append(line).Append("<br>");
                }
            }
        }
        return new MarkupString(sb.ToString());
    }
}

Razor页面保持原写法即可：

<p class="footText">
    @NewLine
</p>

注意：MarkupString会直接渲染HTML，若文本来自不可信来源，要先做HTML转义，防止XSS攻击。

2. 添加CSS样式保留换行 #

给<p>标签设置white-space: pre-line样式，让浏览器保留换行符：

<p class="footText" style="white-space: pre-line;">
    @NewLine
</p>

也可以在CSS类中全局定义：

.footText {
    white-space: pre-line;
}

这种方式不用改C#代码，Environment.NewLine会被识别为换行，同时还会合并多余空格，适合纯文本场景。

3. 生成语义化列表标签（推荐） #

既然是列表项，直接生成<ul>和<li>标签更符合HTML语义，样式也更好控制：
修改C#代码：

public class OrderedListText
{
    public MarkupString NewLine { get; set; }

    public MarkupString ReturnOrderedText(string strText)
    {
        StringBuilder sb = new StringBuilder("<ul>");
        if (strText != null)
        {
            string[] lines = strText.Split(".");
            foreach (var line in lines)
            {
                var trimmedLine = line.Trim();
                if (trimmedLine.StartsWith("-"))
                {
                    sb.Append($"<li>{trimmedLine.Substring(1).Trim()}</li>");
                }
            }
        }
        sb.Append("</ul>");
        return new MarkupString(sb.ToString());
    }
}

Razor页面中使用：

<div class="footText">
    @NewLine
</div>

这种方式不仅能正确换行，还能利用浏览器默认列表样式，也方便自定义CSS美化。

内容的提问来源于stack exchange，提问作者Gerald