.NET Web应用中如何在.razor文件内添加换行

针对你在.NET Framework + Telerik Blazor项目里遇到的span tooltip换行失效问题，给你几个可行的方案：

方案1：原生HTML Title属性换行（非Telerik组件场景） #

如果你的tooltip是依赖原生HTML的title属性实现，直接用换行符的Unicode编码
或者在C#代码里用Environment.NewLine绑定：

写法1：直接写Unicode编码 #

<span title="Impact 1&#10;Impact 2" class="tooltip-target InfoIconMrgn">Impact</span>

写法2：C#代码绑定换行符 #

@code {
    private string TooltipText => $"Impact 1{Environment.NewLine}Impact 2";
}

<span title="@TooltipText" class="tooltip-target InfoIconMrgn">Impact</span>

方案2：Telerik Tooltip组件的换行实现 #

如果你的项目用了Telerik的Tooltip组件（通过tooltip-target类关联），原生title属性会被Telerik组件接管，需要用组件的模板来支持HTML换行：

<TelerikTooltip TargetSelector=".tooltip-target">
    <Template>
        Impact 1<br />Impact 2
    </Template>
</TelerikTooltip>

<span class="tooltip-target InfoIconMrgn">Impact</span>

为什么之前的方法无效？ #

• white-space:pre-line是控制元素自身内容的换行规则，对title属性的提示文本不生效；
• <br>标签在title属性里会被当作纯文本渲染，不会被解析为换行；
• 若使用Telerik Tooltip组件，原生title会被组件覆盖，必须通过组件的API配置内容。

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