如何让Razor Pages中HTML表格单元格的文本显示换行

嘿，这个问题我太熟悉了！浏览器渲染HTML的时候，会自动忽略文本里的换行符（\n）和多余空格，所以你直接用@Html.DisplayFor输出存储的多行文本，自然看不到预期的换行效果。下面给你几个实用的解决方案，按需选择：

方案1：用CSS控制文本换行（最安全推荐） #

这种方法不需要修改数据或HTML输出，直接通过CSS让浏览器保留换行格式，还能避免XSS风险，适合用户输入不可信的场景：

首先在你的样式文件（比如site.css）里添加一个类：

.multiline-text {
    white-space: pre-wrap; /* 保留换行，同时自动换行超出容器的文本 */
    word-wrap: break-word; /* 防止长单词撑破容器 */
}

然后在<dd>标签里加上这个类：

<dd class="multiline-text"> @Html.DisplayFor(model => model.SpecSelResult.Output) </dd>

这样浏览器就会识别文本里的换行符，同时自动处理超出单元格宽度的文本，体验很好。

方案2：替换换行符为HTML换行标签（适合可信输入场景） #

如果你的输入来源是可信的（比如只有内部管理员操作），可以把文本里的换行符替换成<br>标签，再用Html.Raw输出。不过一定要先做HTML编码，防止XSS攻击：

<dd> 
    @Html.Raw(Html.Encode(Model.SpecSelResult.Output).Replace("\n", "<br>")) 
</dd>

这里Html.Encode会先把用户输入里的特殊字符转义，再替换换行符，最后用Html.Raw告诉Razor不要转义<br>标签，这样就能正确显示换行了。

方案3：自定义DisplayTemplate（适合多处复用） #

如果你的项目里多个地方都需要显示多行文本，可以创建一个通用的显示模板，避免重复代码：

1. 在Views/Shared/DisplayTemplates目录下新建一个MultilineText.cshtml文件（如果没有DisplayTemplates文件夹就自己创建）
2. 模板内容如下：

@model string
@if (!string.IsNullOrWhiteSpace(Model))
{
    <span class="multiline-text">@Model</span>
}

3. 然后在需要显示的地方指定模板：

<dd> @Html.DisplayFor(model => model.SpecSelResult.Output, "MultilineText") </dd>

这样以后任何地方需要显示多行文本，只要调用这个模板就行，维护起来超方便。

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