ASP.NET MVC Razor页面tooltip内程序添加的<br>标签不换行问题求解

问题根因 #

Razor引擎默认会对所有通过@语法输出的字符串进行HTML编码，防止XSS攻击，所以你返回的字符串里的<br/>会被转义为<br/>，渲染时就会直接显示为文本，而非作为换行标签生效。

解决方案 #

方案1：使用Html.Raw输出原始HTML（快速实现）

直接修改渲染部分代码，用Html.Raw方法告诉Razor不要对返回的字符串做编码：

<div class="data-tooltip">
    Developers
    <span class="data-tooltiptext">@Html.Raw(GetEmployeeList(item))</span>
</div>

注意：如果员工姓名属于用户可自定义的内容，使用该方法前需要对姓名内容做XSS过滤，避免恶意脚本注入风险。

方案2：使用换行符+CSS样式实现（安全性更高，更推荐）

1. 先修改C#函数，把拼接的<br/>替换为换行符\n：

private static string GetEmployeeList(ProjectSchedule ps)
{
    if (ps.Employees.Count > 0)
    {
        string empList = string.Empty;
        foreach (var employee in ps.Employees)
        {
            empList += employee.Name + "\n";
        }
        return empList.TrimEnd(); // 去掉末尾多余的换行符
    }
    return string.Empty;
}

2. 给tooltip的样式新增white-space: pre-line属性，让浏览器识别字符串里的换行符：

.data-tooltip .data-tooltiptext {
    /* 原有样式全部保留，仅新增以下属性 */
    white-space: pre-line;
}

该方案不需要输出原始HTML，不会引入XSS风险。

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